jQuery Plugin – Select

Source code available from GitHub or a Zipped download.

My Select:

My Select 2:

addOption

You can add a single option: $("#myselect").addOption("Value", "Text");,
change the text of an existing option: $("#myselect").addOption("Value", "Text Replacement"); or add
multiple options using a hash:

var myOptions = {
	"Value 1" : "Text 1",
	"Value 2" : "Text 2",
	"Value 3" : "Text 3"
}
$("#myselect2").addOption(myOptions, false); // use true if you want to select the added options 

ajaxAddOption(url[, params, select, fn, args])

Add options via AJAX (page must return valid JSON, sample below): $("#myselect2").ajaxAddOption("ajaxoptions.js");.

Parameters

  • url – Page to get options from (must be valid JSON)
  • params (optional) – Any parameters to send with the request
  • select (optional) – Select the added options, default true
  • fn (optional) – call this function with the select object as param after completion
  • args – (optional) array of arguments to pass onto the function

$("#myselect2").ajaxAddOption("ajaxoptions.js", {}, false, sortoptions, [{"dir":"desc"}]);

function sortoptions(sort)
{
	var $this = $(this);
	// sort
	$this.sortOptions(sort.dir == "asc" ? true : false);
}

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by

- index: $("#myselect2").removeOption(0);

- value: $("#myselect").removeOption("Value");

- regular expression: $("#myselect").removeOption(/^val/i);

- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

To remove all options, you can do $("#myselect").removeOption(/./);

If you supply a second parameter as a boolean (true, false), then only options that have been selected (and matched) will be removed: $("#myselect2").removeOption("Value 2", true);.

sortOptions([ascending])

Sorting is done as follows: $("#myselect2").sortOptions(false); (descending)
or $("#myselect2").sortOptions(); (ascending)

selectOptions(value[, clear])

Select options by value, using a string as the parameter $("#myselect2").selectOptions("Value 1");, or a regular expression
$("#myselect2").selectOptions(/^val/i);. You can also clear already selected options:
$("#myselect2").selectOptions("Value 2", true);

Originally coded by Mathias Bank, with a modification to allow it to take a regular expression.

copyOptions(to[, which])

You can copy options from one select to another: $("#myselect").copyOptions("#myselect2"); (copy selected options) or
$("#myselect").copyOptions("#myselect2", "all"); (copy all options)

containsOption(value[, fn])

Checks if a select box has an option with the supplied value

Parameters

  • value – Which value to check for. Can be a string or regular expression
    e.g.
    if( $("#myselect").containsOption("val1") ) { ... } or
    if( $("#myselect").containsOption(/^val/i) ) { ... }
  • fn (optional) – Function to apply if an option with the given value is found. Use this if you don’t want to break the chaining
    e.g. $("#myselect").containsOption("val1", copyoption).doSomethingElseWithSelect(); // calls copyoption (user defined function) for any options found, chain is continued

selectedValues()

Returns an array of the values which have been selected. $("#myselect2").selectedValues().

selectedTexts()

Returns an array of the texts which have been selected. $("#myselect2").selectedTexts().

selectedOptions()

Returns a jQuery object with each <option> that has been selected. $("#myselect2").selectedOptions().

One thought on “jQuery Plugin – Select

  1. […] Select box manipulation Remove and add options from a select list or dropdown in many ways. […]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>