Drop Down Box Selection Populates Another Drop Down Box

Posted on 2009-04-15
Last Modified: 2013-12-12
The effect I want to create is really simple, however, doing it is not, at least for me.

I have a form on a page.  When a selection in combo box 1 is made it populates combo box number 2 then 3 then 4.

Like this...

Box 1 - Country
Box 2 - State
Box 3 - City
Box 4 - Zip Code

So for this example let assume I make the following choices:

Box 1:  United States (All countries would be displayed in Box 1)
Box 2:  Idaho (All 50 US States would have been available
Box 3:  Boise (A list of cities that I wanted for Idaho would be here)
Box 4:  83705 (a List of available zip codes for Boise, ID, USA)

I know I have to supply the lists for each box, that is easy, I have the data.  

#1.  How can I do this?
#2.  Is it possible to do this via a connection to a DB where each table in the DB contains information for a different field?  That would be the best but I'll take whatever I can get help with.

Question by:joedunn
    LVL 6

    Expert Comment

    This could all be done without much javascript if you don't mind reloading the page after each selection. Set the onchange attribute of the select element to submit the form. Submitting the form.

    The page would load, write php to generate a second selection box based on what was submitted for the first.

    If you want to do this without reloading, you would need to use an AJAX solution. Onchange of the select element, send the value to the server, have the server generate the code (using PHP if you wish) for the second drop down box that will be returned to the page via AJAX, and use javascript to replace the second drop down list with the new list.

    Author Comment

    How can I do this using Ajax?
    LVL 6

    Accepted Solution

    Here is a how-to i found that goes through and explains all of the necessary code:

    And here is a working example of said code:

    Note that his script is fairly bare-bones, and pulls data from a flat text file, rather than a database. It should be fairly trivial to use PHP to connect to your database rather than pull data from a text file.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Join & Write a Comment

    Suggested Solutions

    Accessibility and Usability are two concepts that seem to be closely related.  But, too many people seem to have a distorted perception of them. During last five years, those two words have come to the day-to-day work of almost every web develope…
    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now