With jQuery it is quick and easy to access and modify elements in a select dropdown box. There are of course several ways of doing thing and I will try to cover most of them here.

Quicklinks:
The test setup
Get the selected value from the select / dropdown box
Set the selected value
Insert new options and values in the dropdown box
Removing an entry from the select box
Disable and enable options
The code

The test setup.

For the following examples I will use a dropdown / select box like this:

10 Apples
5 Oranges
12 Bananes

The HTML-code for the dropdown is where basic:

<select id="dropdown">
<option value="apples">10 Apples</option>
<option value="oranges">5 Oranges</option>
<option value="bananas">12 Bananes</option>
</select>

Get the selected value from the select / dropdown box.

When a value is selected, it could be nice to use the value for something and the first step to doing this, is to receive the value. This is actually very simple to do:
dropdown1:
10 Apples
5 Oranges
12 Bananes

button1: Fetch value from dropdown

Code:

    $("#button1").click( function() {
        alert("The selected value is: " + $("#dropdown1").val() );
    });

Here I have used the val()-function on the dropdown box the receive the value for the selected element and it will output the content of the “value”-parameter on the select-box.

If you would rather have the visible text (ie. 10 Apples or 5 Oranges) outputted, you will have to use the html()-function instead. It’s a bit more tricky, as you should only get the content of the selected value and not the entire select-box.
To do this, we have to do a combination like this:
button2: Fetch content from dropdown

Code:

    $("#button2").click( function() {
        var selectedvalue = $("#dropdown1").val();
        alert("The selected value is: " + $("#dropdown1 option[value="+selectedvalue+"]").html() );
    });

Another and more simple way of getting the text from the selected element could be:

    $('#dropdown1 :selected').text();

Set the selected value.

Setting the selected value is very easy. All you have to do, is use the val()-function:
dropdown2:
10 Apples
5 Oranges
12 Bananes

button3: Select ‘oranges’
button4: Select ‘bananas’

code:

    $("#button3").click( function() {
        $("#dropdown2").val("oranges");
    });
    $("#button4").click( function() {
        $("#dropdown2").val("bananas");
    });

Insert new options and values in the dropdown box.

If the content of the dropdown are depending on other fields, it is often necessary to change or insert new values to a dropdown box.
This can be done by appending new <option>-tags to the <select>-box:
dropdown3:
10 Apples
5 Oranges
12 Bananes

button5: Append a new field named ‘20 Grapes’
button6: Prepend a new field named ‘20 Melons’

Code:

    $("#button5").click( function() {
        // insert new option at the bottom of the dropdown box
        $("#dropdown3").append('<option selected=selected value="grapes">20 Grapes</option>');
    });
    $("#button6").click( function() {
        // insert new option at the top of the dropdown box
        $("#dropdown3").prepend('<option selected=selected value="melons">20 Melons</option>');
    });

Removing an entry from the select box.

Remove options is very easy. All you need is knowing which values to remove:
dropdown4:
10 Apples
5 Oranges
12 Bananes

button7: Remove the “10 Apples” option

Code:

    $("#button7").click( function() {
        $("#dropdown4 option[value='apples']").remove();
    });

Disable and enable options.

If some of the options in the dropdown is depending on other values, it is sometimes nice to enable and disable entries on the fly.
dropdown5:
10 Apples
5 Oranges
12 Bananes

button8: Disable the”5 Oranges” option
button9: Enable the “5 Oranges” option

Code:

    $("#button8").click( function() {
        $("#dropdown5 option[value='oranges']").attr("disabled", "disabled");
    });

    $("#button9").click( function() {
        $("#dropdown5 option[value='oranges']").removeAttr("disabled");
    });

The code.

The complete jQuery code with the above examples, can be downloaded here

Tags: jQuery