SQL PHP HTML ASP JavaScript articles and free scripts to download
JavaScript Listbox

Double drop down list box in client side Javascript

Based on the selection of the first drop down list box the options of the second drop down list box can be changed dynamically. This is widely used in forms to narrow down the second html listbox based on the first dropdown list selection.

Examples of two dropdown listbox

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.

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.

We will use client side JavaScript to develop this script. 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.

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 drop 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 ).

Script & Download

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

Number of User Comments : 11


Google+

Webbieads03-08-2010
Great, script, I want to use this but have two forms (exactly the same) on one html page and cannot implement this script for both - do you know how I could do that?
Tom11-02-2011
The code does not work if allowing user to make multiple selections (i.e. multiple="multiple"). Please add update for this in your tutorial. Thank you!
sardar19-03-2011
how to integrate ajax with multiple selection with dropdown list.is there any solution for that
your help will be appreciated
newbie31-05-2011
Can you tell me how to encode categorie and subcategorie values to display in utf-8 format?
James01-06-2011
I need to have multiple instances of the Double drop down list box on my form (I need to use it three time). I have been unable to figure this out, can anyone offer assistance?
andy05-07-2011
My programming experience is minimal, but I was able to follow this tutorial relatively easily and implement it (dynamic population of second list box...) within a couple of hours, and now I´m very happy - thank you!
vinu15-03-2012
hai this nice then display the coding all of u used it
debbieh17-05-2014
I want the results of two dropdown box selections 1) State 2) City to then populate a page of business listings (specific categories)-- let's say they are city, county & federal courthouses... (from there I will link to 'city=Atlanta "Atlanta city courthouse" aref="http*URL"--- for example)... can you help me? How do I get the SUBMIT search button to then populate the page with results? (i.e. courthouses)
mehul05-07-2014
can you give example of 3 dynamic dropdown menus... m realy stuck in coding and which i found is not working in case of space in any category string.. please help me
smo05-07-2014
You can keep category name within single quotes. That should work.
stephen22-09-2014
I need to be able to use one drop down list to populate three or more fields
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked

Form Validation in JavaScript
Checkbox Validation of a form



HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer