Developpement Informatique

février 18, 2010

jQuery » Select box manipulation

Filed under: JQuery — izaam01 @ 1:53
jQuery » Select box manipulation

Source code available from GitHub or a Zipped download.

My Select:

#myselect option 1 #myselect option 2

My Select 2:

#myselect2 option 1 #myselect2 option 2

#myselect2 ‘#myselect2 option 2’ (text) : ‘myselect2_2’ (value) selected
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 »


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


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


  • 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


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


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


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


Un commentaire »

  1. Sélectionne tous les éléments qui sont sélectionnés.

    $(« select »).change(function () {
    var str = «  »;
    $(« select option:selected »).each(function () {
    str += $(this).text() +  » « ;
    $(« div »).text(str);

    div { color:red; }


    Commentaire par izaam01 — février 18, 2010 @ 2:00

RSS feed for comments on this post. TrackBack URI

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:


Vous commentez à l'aide de votre compte Déconnexion /  Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion /  Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Créez un site Web ou un blog gratuitement sur

%d blogueurs aiment cette page :