Using a 2D object in jQuery to populate inter dependent drop down options
<p>I am trying to make a set of dependent Drop Down questions, the value of the second one being dependent on the values of the first one.
I am thinking of entering the data into a jquery object, like this one (it's just a scheme, I don't know how to make an object like this in jQuery):</p>

<pre><code>var object = {
    'Please Select|' : ''
    'Quality|Quality' : ['Please Select|','BMW|BMW','Merc|Merc']
    'Speed|Speed' : ['Please Select|','Zonda|Zonda','Porche|Porche']
}
</code></pre>

<p><strong>The first question</strong> would have the following options in the dropdown:</p>

<ul>
<li>Please Select, Quality, Speed</li>
</ul>

<p>The second question would have:</p>

<p>If the user selected <strong>Quality</strong> from the options of the first question, he would get:</p>

<ul>
<li>Please select, BMW, Merc</li>
</ul>

<p>If the user selected <strong>Speed</strong> from the options of the first question, he would get:</p>

<pre><code>Please Select
Zonda
Porche
</code></pre>

<p>Right now, I could only come up with the code which handles two questions like this:</p>

<pre><code>&lt;div id="test1"&gt;&lt;/div&gt;
&lt;div id="test2"&gt;&lt;/div&gt;

var questions = ['test1','test2']

var test1 = ['|Please Select','1|1','2|2','3|3']
var test2 = ['|Please Select','1a|1a','2a|2a','3a|3a']

$.each(questions, function(key,val){
    arr = window[val];
    the_id = "#"+val;
    $.each(arr, function(key,val){
        options = val.split('|');
        $(the_id).append(
            $('&lt;option&gt;&lt;/option&gt;')
            .val(options[0])
            .html(options[1])
        );
    });
});
</code></pre>

<p>For the dependent questions I am thinking of using the jQuery <strong>.change event</strong>, but I really need help in getting the data from an <strong>object like above</strong>.</p>

<p>Any ideas?</p>
