Double drop down list box in client side Javascript

Double dropdown list
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.

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

Subscribe to our YouTube Channel here


* indicates required
Subscribe to plus2net



    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?


    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!


    how to integrate ajax with multiple selection with dropdown there any solution for that your help will be appreciated


    Can you tell me how to encode categorie and subcategorie values to display in utf-8 format?


    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?


    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!


    hai this nice then display the coding all of u used it


    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)


    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


    You can keep category name within single quotes. That should work.


    I need to be able to use one drop down list to populate three or more fields


    nice script

    Post your comments , suggestion , error , requirements etc here .

    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 All rights reserved worldwide Privacy Policy Disclaimer