4 jQuery snippets you can use to manipulate select input

Hello everyone, welcome to my today’s post on jQuery. Today I’m going to introduce 4 useful and most demand able select/drop-down lists manipulation jQuery scripts for you. In this post you will learn about how to execute jQuery command for select lists.

Select lists is one of the most common and popular part in web Form section. Most of Form template or website registration section we can see select fields , that they provide you and option for select your country from a drop-down lists.

Today I’m going to give you real-time example how to get value from a select field and other operation on select field. I’ve added demo URL for each script. and in demo page you will find download links for downloading source code. As a result, you can easily download scripts and also view demo in live. Lets go –

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:

– 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>

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.

Demo: http://demos.coolajax.net/jquery/selectfield/

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

– 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>

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.

Demo: http://demos.coolajax.net/jquery/selectfield/getting_text.html

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

– 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>

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.

Demo: http://demos.coolajax.net/jquery/selectfield/multiple_select_value.html

4. Switch/case statements for selected option:

– 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>

Demo: http://demos.coolajax.net/jquery/selectfield/switch_case_jquery.html

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.

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!