4 jQuery snippets you can use to manipulate select input

Today I am going to give you real-time example how to get value from a select field and other operation on select field. I have added some demo URL with each example. In the demo page, you will get the the download link to download the source code.

When it comes to manipulating the DOM, fewer elements are more tiresome than the good old select input. Fortunately for us, jQuery makes what was once a headache, a walk in the park. Listed below are 4 snippets which should make manipulating those selects more pleasant than say, pulling your own teeth.

1. How to Get the value of a selected option:

This could not be simpler. Remember how before Jquery, you had to use selected Index and all those lovely JavaScript methods. I do, and I do not miss it one bit.

– jQuery Scripts:

$(function(){
    $("select#my_select_box").bind("change",function(){
        var country_name = $(this).val();
        if(country_name==""){
            $("p#preview").html("").html("Please select a country");
        } else {
            $("p#preview").html("").html(country_name);
        }
    });
});

– HTML Scripts:

<select id="my_select_box">
    <option value="">Select Country</option>
    <option value="Australia">Australia</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="India">India</option>
    <option value="Japan">Japan</option>
    <option value="Nepal">Nepal</option>
    <option value="USA">USA</option>
</select>

2. How to get the text of a selected option:

Similar in concept to the first snippet with one difference. Where the first example gives you the value of the selected option, this example gives you the actual text contained inside the option tag.

– jQuery Scripts:

$(function(){
    $("select#my_select_box").bind("change",function(){
        var country_option_text = $("select#my_select_box :selected").text();

        if(country_option_text==""){
            $("p#preview").html("").html("Please select a country");
        } else {
            $("p#preview").html("").html(country_option_text);
        }
    });
});

– HTML Scripts:

<select id="my_select_box">
    <option value="">Select Country</option>
    <option value="1"> Australia </option>
    <option value="2"> Bangladesh</option>
    <option value="3"> India</option>
    <option value="4"> Japan</option>
    <option value="5"> Nepal</option>
    <option value="6"> USA</option>
</select>

3. Getting the text/value of multiple selected option:

Once again, the same concept as the first two examples, except we’re now using jQuerys each() method to loop through all selected options in a multiple select list. Each value or text value is read into an array for later use.

– jQuery Scripts:

$(function(){
    $("input#country_button").bind("click",function(){                
        var country_info = [];//define array to store value 
        var output = ''; // define a string for show the output
        $('#my_select_box :selected'). each(function(i, selected) { 
            country_info[i] = $(selected).text(); 
        });                
        for(key=0; key<country_info.length; key++){
            output +="country Name: "+country_info[key]+"
";
        }                
        $("p#selected_texts").html("").html(output);                
    });
});

– HTML Scripts:

<p>
    <select id="my_select_box" multiple="">
        <option value="1" selected="selected"> Australia </option>
        <option value="2"> Bangladesh</option>
        <option value="3"> India</option>
        <option value="4"> Japan</option>
        <option value="5"> Nepal</option>
        <option value="6"> USA</option>
    </select>
</p>
<p><input value="show countries" id="country_button" type="button" /></p>

4. Switch/case statements for selected option:

Much like example 2, we are getting the text() value of a selected option, only this time we are going to use it inside a switch statement.

– jQuery Scripts:

$(function(){
    $("select#my_select_box").bind("change",function(){
        var country_id = $("select#my_select_box :selected").val();                
        switch (country_id) { 
            case '1':
            $("p#preview").html("").html($("select#my_select_box :selected").text());
            break;
            case '2':
            $("p#preview").html("").html($("select#my_select_box :selected").text());
            break;
            case '3':
            $("p#preview").html("").html($("select#my_select_box :selected").text());
            break;                   
            default:
            $("p#preview").html("").html("Please select a country");
        }                
    });
});

– HTML Scripts:

<p>
    <select id="my_select_box">
        <option value="">Select Country</option>
        <option value="1"> Australia </option>
        <option value="2"> Bangladesh</option>
        <option value="3"> India</option>
    </select>
</p>

That’s all for today. Thanks for reading my tutorial. Was this information useful? What other tips would you like to read about in the future? Share your comments, feedback and experiences with us by commenting below!