Skip to Menu
jQuery » Select box manipulation

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");.

{
	"ajax1": "AJAX option 1",
	"ajax2": "AJAX option 2",
	"ajax3": "AJAX option 3"
}

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().

Discussion