Hello everyone, welcome to my today's post on jQuery. In my last tutorial we learn "How create a show/hide effect" .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.

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.

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 options.

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. Using selected options in switch/case conditional statements

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!

Like our site? Be a member of Coolajax fan page to get daily posts updates!