Question

I have 2 drop down lists, when the user selects dropdown#1 then I need to update dropdown#2 with options that are relevant for the dropdown#1 selection.

e.g.

Dropdown#1 has car manufacturers: ford, toyota, honda

Dropdown#2 will be cars for that specific manufacturer.

How should I go about storing this data in javascript?

I was hoping I could create a collection like some sort of dictionary or hash so I can populate each drop down easily.

I have the actual data from the database, then on the server-side I will create the JavaScript I need to create this data structure.

Answer 1

From your comment
I don't want to make an ajax call, I want to store all the data client side in a javascript object, I am asking how to structure that data

So just an idea

HTML

<select id="cars_company">
    <option value="ford">Ford</option>
    <option value="toyota">Toyota</option>
</select>

<select id="cars">
    <option value="ford_car_one">Ford Car One</option>
    <option value="ford_car_two">Ford Car Two</option>
</select>

JS

$(function(){
    cars={
        ford:{
            ford_car_one:'Ford Car One',
            ford_car_two:'Ford Car Two'
        },
        toyota:{
            toyota_car_one:'Toyota Car One',
            toyota_car_two:'Toyota Car Two'
        }
    };

    $('#cars_company').on('change', function(){
        $('#cars').html('');
        $.each(cars[$(this).val()], function(k, v){
            $('<option></option>').val(k).text(v).appendTo($('#cars'));
        });
    });
});​

DEMO.

​