JQuery: Playing with Select (DropDownList/ComboBox)
Why oh why did the HTML overlords call their Combo Box/DropDownList a SELECT? Then call the items in the list OPTIONS? It isn’t like there weren’t a plethora of other names for the widget. Then it could have been consistent anyway.
Oh well.
It seams that each time I start a new project I have to relearn how to grab values out of a DropDownList – I mean “select element”. Anyway, I’m trying to get this down before I go nuts and have to learn it all over again.
Basic Select
First off, here is the basic html I’m talking about:
1: <select id="ComboBox" >
2: <option value="1">Value 1</option>
3: <option value="2">Value 2</option>
4: <option value="3">Value 3</option>
5: <option value="4">Value 4</option>
6: <optgroup label="Group1">
7: <option value="5">Value 5</option>
8: <option value="6">Value 6</option>
9: <option value="7">Value 7</option>
10: <option value="8">Value 8</option>
11: </optgroup>
12: </select>
Nice and simple. Now, the basic things you want to do with said select statement:
1. Get the value of the selected item.
2. Get the text of the selected item.
3. Find out when the value changed
4. Programmatically set the selected item.
5. Modify the list.
Most of those are very easy with JQuery, but one is slightly strange. Lets go through these one by one:
1. Get the value of the selected item
This is the easiest. Use the val method. All done.
1: $("#ComboBox").val()
2. Get the text of the selected item
You would think this would be easy as well, but it isn’t. You cannot just use the text() method on the combobox. That will give you the text values of all of the options in a single string. Not what you want. The trick is to use the :selected query modifier on the option.
1: $("#ComboBox option:selected").text()
Now, you might be tempted to use the ‘>’ (means direct descendent of) between the #ComboBox and the option — don’t. If you look at my example above, that code will only work for options not in optgroup nodes.
3. Find out when the select value changed
This is also rather easy with JQuery.
1: $("#ComboBox").change(function() { /* do something here */ });
4. Programmatically set the selected item.
1: $("#ComboBox").val(2);
5. Modify the list.
Modifying a select element is not fundamentally different than modifying any other element in the dom, but there are a few basics here to keep in mind. Mainly: try to avoid using the dom directly. Create html strings instead.
Clear the list: $(“#ComboBox”).html(“”);
Add to the list: $(“<option value=’9’>Value 9</option>”).appendTo(“#ComboBox”);
Simple as that.
Nice tips.
You say “try to avoid using the dom directly” — why?
Other gotchas of select boxes: select that allows multiple selected options behaves differently.
Also, the val() of an option that does not have a “value” attribute is the the text() string.
The reason it’s called “select” instead of a “DropDownList” is a) Microsoft, thankfully, doesn’t get to name things all the time, and b) HTML is supposed to be presentation independent. Calling it “select” allows the client to display the list of options however they want. Same reason that “i” and “b” are deprecated in favor of “em” and “strong.”
Hi,
I am looking for a way to trigger a dropdown to clear any value that has been selected from it, so it returns to its default state where nothing is selected.
The best way i’ve found to achieve this is to prepend a blank option to the dropdown and then select that blank option:
$(“#dropdown”).prepend(“”);
$(“#dropdown option:first-child”).attr(“selected”,”selected”);
But ideally I would prefer not to have a blank option in the dropdown selector so that I dont have to validate the user to ensure they are not submitting a blank value.
What i’m wondering is if there is a simple way to tell the dropdown to return to the state where nothing is selected, e.g. if there was something like (“#dropdown”).reset – any ideas?
@Mark Puddephatt
Whoop a bit of my script seems to have got lost, it should be:
$(“#dropdown”).prepend(“”);
$(“#dropdown option:first-child”).attr(“selected”,”selected”);
(without the spaces on the option tags)
OK sorry about this, but the comments box doesnt like html code! But the prepend has an option tag inside the quotes…
@mark, as far as I know, a dropdown ALWAYS has a selected item. By default it is the first item in the list. So your dropdown needs a blank item in it if you want a ‘nonselected’ option.
The alternative is to not use a dropdown at all. Instead use a textbox that links to a hidden div that dispalys when the textbox is selected/clicked. The JQuery Calendar control does this.
Hi, I’m french and i have a problem. Maybe coud you help me.
I use combobox
here : http://jquery.sanchezsalvador.com/jquery/page/jquerycomboboxapi.aspx
And i put an onchange on my select. With “onchange”, a “option” is like an “a href”.
But there is no result.
Could you help me please ?
Very consise article, with everything I wanted to know about jQuery and select-options or drop down lists. Thanks so much!