Using javascript and jquery, to populate related select boxes with array structure
<p>Using answers to <a href="http://stackoverflow.com/questions/57522/javascript-array-with-a-mix-of-literals-and-arrays">this question</a>, I have been able to populate a select box based on the selection of another select box. ( <a href="http://stackoverflow.com/questions/57522/javascript-array-with-a-mix-of-literals-and-arrays#58062">I posted my answer here</a>) Pulling the data from an array structure built server-side, stored in a .js file and referenced in the html page.</p>

<p>Now I would like to add a third select box. If I had 3 sets of data (model, make, options) something like this (pseudo code):</p>

<pre><code>cars : [Honda[Accord[Lx, Dx]], [Civic[2dr, Hatchback]],
   [Toyota[Camry[Blk, Red]], [Prius[2dr,4dr]]
</code></pre>

<p>Ex: If Honda were selected, the next select box would have [Accord Civic] and if Accord were selected the next select box would have [Lx Dx]</p>

<p>How can I</p>

<p>1) create an array structure to hold the data? such that</p>

<p>2) I can use the value from one select box to reference the needed values for the next select box</p>

<p>Thanks</p>

<p><strong>EDIT</strong></p>

<p>I can create the following, but can't figure out the references in a way that would help populate a select box</p>

<pre><code>var cars = [
 {"makes"  : "Honda",
  "models"  : [
 {'Accord' : ["2dr","4dr"]} ,
 {'CRV'  : ["2dr","Hatchback"]} ,
 {'Pilot': ["base","superDuper"] } ]
 },
 {"makes"   :"Toyota",
  "models"  : [
 {'Prius'   : ["green","reallyGreen"]} ,
 {'Camry'   : ["sporty","square"]} ,
 {'Corolla' : ["cheap","superFly"] } ]
 } ] ;     

 alert(cars[0].models[0].Accord[0]); ---&gt; 2dr
</code></pre>
