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


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    Webbieads

    03-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?
    Tom

    11-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!
    sardar

    19-03-2011

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

    31-05-2011

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

    01-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?
    andy

    05-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!
    vinu

    15-03-2012

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

    17-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)
    mehul

    05-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
    smo

    05-07-2014

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

    22-09-2014

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

    13-12-2014

    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 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer