title: jQuery populate drop-down options based on another drop-down option using Javascript Object Literal
body: <p>I am building up a selection list for users based on the year and make (manufacturer) of the car they choose. Instead of building up all select and options and then showing and hiding them, I would only like to populate the select box and options with the javascript object literal that correlates with the vehicle manufacturer. I.E. if they choose this manufacturer then populate the next dropdown with these vehicles and on change, replace those to match to the new manufacturer that has been changed. </p>
  
  <p>Here's what I have so far:</p>
  
  <p>A select box:</p>
  
  <pre><code>&lt;label&gt;Make&lt;/label&gt;
  &lt;select id="makeSelectionBox" class="stringInfoSpacing"&gt;
  &lt;option value="-1" selected="selected"&gt;Make&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>That is populated in an object literal:</p>
  
  <pre><code>var modelMakeJsonList = {"modelMakeTable" : 
                      [
                      {"modelMakeID" : "1","modelMake" : "Honda"},
                      {"modelMakeID" : "2","modelMake" : "Ford"},
                      {"modelMakeID" : "3","modelMake" : "Chevy"},
                      {"modelMakeID" : "4","modelMake" : "Nissan"},
                      {"modelMakeID" : "5","modelMake" : "Toyota"},
                      ]};
  </code></pre>
  
  <p>Using this script:</p>
  
  <pre><code> $(document).ready(function(){
    var listItems= "";
    for (var i = 0; i &lt; modelMakeJsonList.modelMakeTable.length; i++){
      listItems+= "&lt;option value='" + modelMakeJsonList.modelMakeTable[i].modelMakeID + "'&gt;" + modelMakeJsonList.modelMakeTable[i].modelMake + "&lt;/option&gt;";
    }
    $("#makeSelectionBox").html(listItems);
  });
  </code></pre>
  
  <p>It is working as needed and I have an additional one to populate the other dropdowns. But as mentioned above, I would like an on change function to handle the populating of one select box instead of having to show and hide each one.</p>
  
  <p>I tried this but it broke everything:</p>
  
  <pre><code>$(document).ready(function(){
  $("select#makeSelectionBox").on('change',function(){
      if($(this).val()=="Honda"){
          $("select#modelSelectionBox").html(modelTypeHondaJsonList);
      }else if($(this).val()=="Ford"){
          $("select#modelSelectionBox").html(modelTypeFordJsonList);
      }
  });
  </code></pre>
  
  <p>If anyone has any ideas please let me know. Here is a functional fiddle:</p>
  
  <p><a href="http://jsfiddle.net/b9tMU/7/" rel="noreferrer">DAS FIDDLE</a></p>