title: Using javascript and jquery, to populate related select boxes with array structure
body: <p>Using answers to <a href="https://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="https://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>