Populate one dropdown list based on the selection of other dropdown list

Question

I want to create two drop down lists, category and item.

If I select one of the categories named car, then item drop down list should have Honda, Volvo, Nissan.

If I select one of the categories named phone, then item drop down list should have this iPhone, Samsung, Nokia.

How can I do this? I know that I can't do it with plain HTML.

Answer 1

WORKING DEMO http://jsfiddle.net/kasperfish/r7MN9/3/ (with jquery)

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');


    if(cat=='car'){
        cars.forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

    if(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }

} 

UPDATED: using eval() to be able to add as much arrays as you want. JSFIDDLE DEMO

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');
names=new Array('Kasper','Elke','Fred','Bobby','Frits');
colors=new Array('blue','green','yellow');

populateSelect();

$(function() {

      $('#cat').change(function(){
        populateSelect();
    });

});


function populateSelect(){
    cat=$('#cat').val();
    $('#item').html('');

       eval(cat).forEach(function(t) { 
            $('#item').append('<option>'+t+'</option>');
        });
    }

Answer 2

There are numerous ways that you can accomplish this depending on what your end goal is. Here are the 2 most common ones.

This is the basic process:

1. Page loads with the initial dropdown populated with options, let's say Category (Car, Truck, SUV) and the item drop-down disabled.
2. User selects a value from the first drop-down, there are a few ways to handle this:

AJAX (the most seamless experience with fewest page loads):

1. Using Javascript send an ajax request to a PHP script (or any other handler) containing the value of the selected option from the category drop-down as either a post or request parameter.
2. Retrieve the values for the item drop-down based on our category, these could be from our database, a variable, a static file, or any other means that you can come up with
3. Return our values as a response to the AJAX request (json, xml, plaintext, whatever fits best for you and you're most comfortable using)
4. Using Javascript (or you could use a library like jQuery) we insert the returned options from our AJAX request into the item drop-down and enable it so the user can make a selection.
5. From here we can either continue using AJAX requests and responses or POST the form a return a final page, or whatever your particular usage calls for.

If you don't want to use AJAX, you could very easily POST the form to a Server-side handler, get the value from the category drop-down, locate your values for the item drop-down and then render your HTML response in which you set a value for the category drop-down and disable it (so the user would have to use the back button if they would wanted to change the category) and populate the item drop-down.