Jquery – Handling HTML SELECT

Handing SELECT is not trivial using javascript and it requires some effort manipulating SELECT when your website is enough dynamic, specially when you are using values for server to fill SELECT at loading time. Generally following options are required while working with SELECT

1. Adding options in SELECT
2. Adding options using Ajax
3. Removing options from SELECT
4. Select Options
5. Get selected values from SELECT

You can use quite useful Jquery plugin for select boxes, download it from github repository

Use the packed on i.e. jquery.selectboxes.pack.js for in your application and for understanding you can go through jquery.selectboxes.js

You need to include this js in your html code along with Jquery.

Here is some sample code examples:

1. Adding options in SELECT:

Add single option

  1.  
  2. $("#IdOfSelectBox").addOption("Value", "Text");
  3.  

Adding multiple options

  1.  
  2. var optionArray = {
  3. "Value 1" : "Text 1",
  4. "Value 2" : "Text 2",
  5. "Value 3" : "Text 3"
  6. };
  7. // Use true if you want to select added options
  8. $("#IdOfSelectBox").addOption(optionArray, false);
  9.  
  10.  

2. Adding options using Ajax:

  1.  
  2. /*
  3. @param String url Page to get options from (must be valid JSON)
  4. @param Object params (optional) Any parameters to send with the request
  5. @param Boolean select (optional) Select the added options, default true
  6. @param Function fn (optional) Call this function with the select object as param after completion
  7. @param Array args (optional) Array with params to pass to the function afterwards
  8.  
  9. */
  10. $("#IdOfSelectBox").ajaxAddOption("getoptions.php", {"id" : "7"}, false, sortoptions, {"date": "desc"});
  11.  



3. Removing options from SELECT:

  1.  
  2. $("#IdOfSelectBox").removeOption("Value"); // remove by value
  3. $("#IdOfSelectBox").removeOption(/^val/i); // remove options with a value starting with 'val'
  4. $("#IdOfSelectBox").removeOption(/./); // remove all options
  5. $("#IdOfSelectBox").removeOption(/./, true); // remove all options that have been selected
  6. $("#IdOfSelectBox").removeOption(0); // remove by index
  7.  



4. Select Options:

  1.  
  2. // true for clearing existing selection, pass false if you do not want to clear the selection
  3. $("#IdOfSelectBox").selectOptions("val1", true); // with the value 'val1'
  4. $("#IdOfSelectBox").selectOptions(/^val/i); // with the value starting with 'val', case insensitive
  5.  



5. Get selected values from SELECT:

  1.  
  2. // returns array of values
  3. $("#IdOfSelectBox").selectedValues();
  4.  

19 thoughts on “Jquery – Handling HTML SELECT

  1. “Hello,
    how do I return the text and not the value of the option?

    thanks
    Ferdinando – Brazil”

    $(“#list option[value='2']“).text()

  2. Great plugin! One of a kind!

    Quick question: my OPTIONS are being generated on the fly. when I try to

    var locationId = “3″;
    var newOption = {
    locationId : locationName
    }

    $(“#searchLocationSelect”).addOption(newOption, true); “

    The value is always “locationId”, how do make the value, the value of the variable ‘locationId’?

    Thanks so much!

  3. Hi
    I want to use the addOption() method itself, I have one query can I insert first value as in the list if yes, how to do that.

  4. how can we remove certain options from Select list based on the text value of that option ?

    (note: it is not just the selected option , but some of the options need to be removed based on the text)

    e.g. remove any option that starts with the text *

    *one*
    two
    *three*
    *four*

  5. Hi bpbrainiak,

    Updated the link of the download. I have already added a comment for the new location of download. Thanks for your time.

  6. Hi,
    the script is very interesting.
    But I would like the dynamic results from a asp page instead of php.
    What to do?
    Thanks

Leave a Reply