|
|
Double drop down list box in client side Javascript
Based on the selection of the first drop down list box the value of the second drop down list box can be changed dynamically. This is widely used in forms to narrow down the second html list based on the first list selection. For example if you are selecting USA as country from the country list box in html then you can find only States of USA in the second list. It can be from State list to City list also. Based on the selection of the State list we can have city list in the second drop down box.
To develop this script we will use JavaScript to use it in client side. We can achieve the same by using server side script like PHP also. If you are using server side script then the data on selection of the first drop down list has to travel back to server and return. Some time this is not a good choice if the user is in slow internet connection.
In another case if same set of two drop down lists are used again and again in a single page then we can't send the information back each time the user go for a selection. For example if we are buying grocery from a store and there are 10 products in a page each having a set of its own standard packaging sizes. On selection of one product the second list ( packaging sizes ) shows the sizes available for that product. Here the page has 10 rows of such two drop down lists. So the visitor can select 10 different products and respective sizes from the drop down lists. Here for each selection of first list we can't send the data to server and get the second list. Here we will use client side JavaScript to manage the option of the second drop down list. This will be faster than the server side scripting. Here the total data of both lists will be downloaded once at the time of page loading only.
You can visit the PHP drop down list tutorial to learn how dynamic drop down lists can be developed by server side scripts. You can also see similar server side script in ASP using VBScript where second drop down is managed.
Read how Ajax is used to manage two drop down lists in PHP section.
Demo of the client side dropt down script
With this let us go to the demo of the script. Here we have three elements ( options ) in the first drop down list category ( fruits , games and scripts ) and each has three options has three sub options ( sub category ).
Now let us study how this works and the script for this demo in our next section. You can download the code of this tutorial at the end.
Learn how the same drop down list is developed by taking data from Mysql table
| |
| | |
|
|
|
| List Box |
|
|
|
| Subscribe |
|
Submit your email address and receive
article and product notifications. Your email is safe with us.
|
|
|
|
If you are facing any problem in viewing this page, please tell us
