DropDownList Manipulation Using jQuery

In this blog post we are going to see how can we manipulate a dropdownlist using jQuery. Here is the brief overview what we are exactly going to do.

  1. Dynamically populating the dropdownlist
  2. Handling the item change event of a dropdownlist
  3. Getting the value and the text of the dropdownlist selected item
  4. Programmatically setting the item of the dropdownlist

1. Dynamically populating the dropdownlist

The function loadDropDownList will take a collection (a key-value pair array) and populate the dropdownlist “countries”. “$.each” is a jQuery function which iterates the array item by item and calls the “function(index,value)” for each item where index would be the item’s key and value would be the item’s value. Then the list item html markup is created for the list item and appended to the dropdownlist

2. Handling the item change event of a dropdownlist

The jQuery API offers lot of useful functions to operate with the html form elements. One of such function is “change()” which will called whenever the item value is get changed.

3. Getting the value and the text of the dropdownlist selected item

The jQuery code mentioned above will set the two span labels “countryValue” and “countryText” with the value and text of the selected item in the “countries” dropdownlist, when we select an item in the “countries” dropdownlist. The jQuery function “val()” enable us to find out the value of a form element, in our case we have utilized it to get the value of the “countries” dropdownlist. To get the selected item’s text we have to use the child and attribute selector together as a selector. “#countries > option[value=’IN’]” – will selects all option child elements(with appropriate value) of item with the id “countries”. “html()” retrieves the html of the selected element. “text(value)” will set the text of the selector.

4. Programmatically setting the item of the dropdownlist

Demo

Comments