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>

Value 1 Value 2 Value 3 Value 4 Value 5 Value 6 Value 7 Value 8

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.

Chris Brandsma Esoterica