Introduction with JQUERY - Manipulating Dropdowns using JQUERY

One of the most common problems I often find in many programming forums is getting the value of a selected option in a drop down. Well, in JQUERY you can select it easily with just a couple of lines. Getting the selected value's in a drop down is important mostly used in forms in getting the users selection. In this tutorial you can see how it is easily done.

Code

If ever you want to get the value of what is being selected on the drop down. All you have to do use the "option:selected".

Code

$("#dropdown option:selected").text();

By using the .text() method, you are actually getting the names of the selected item in the drop down. If you select the first option, then you will be return with the text "John". However, if you want to get the value all you have to do is change the .text() method into a .val() method.

Code

$("#dropdown option:selected").val();

In that case, if you select "Drake" from the dropdown list, you are returned with the value "2".

Code

var dropdownValue = $("#dropdown option:selected").val();

The variable dropdownValue will store what is being selected on the dropdown.
For more information you can check out Dr. Richard's tutorial.