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

jQuery Code:

$(document).ready(function () {
var myCollection = {
‘IN’: ‘India’,
‘AUS’: ‘Australia’,
‘ENG’: ‘England’
};
loadDropDownList(myCollection);
}); 

function loadDropDownList(collection) {
$.each(collection, function (index, value) {
var listItem = $(””).val(index).html(value);
$(”#countries”).append(listItem);
});

}

HTML:

Countries: 

Code Explained:

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


jQueryCode:

$(document).ready(function () {
$(”#countries”).change(function () {
// Place your code here
});
}); 

Code Explained:

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

jQueryCode:

$(document).ready(function () {
$(”#countries”).change(function () {
$(”#countryValue”).text($(”#countries”).val());
$(”#countryText”).text($(”#countries > option[selected]”).html());               
});
}); 

HTML:

Selected Country’s Text:  
Selected Country’s Value:  

Code Explained:

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[selected]” – will selects all option child elements(with the attribute selected) 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

jQueryCode:

$(document).ready(function () {
$(”#btnIn”).click(function () {
$(”#countries”).val(’IN’);
});
}); 

HTML:

Code Explained:

We can programmatically select an item in the dropdownlist by setting its value.


Conclusion:

In this blog we have seen how we manipulate a dropdownlist using jQuery. You can download the source code and view the demo of this sample post here.