title: "Filtering" second dropdown box with jquery and json data
body: <p>I have two drop-downs and a text box. First drop down is a list with static values. Second drop down is dynamically filled from a json array. Here is what I would like to achieve. Filter the second drop down based on the value selected from the first drop down. And the text box will output the value based on the selected value from the second drop down. Here is where I am currently:
  On change I am able to populate the 2nd drop-down and able to output the matched value to the text-box. However my 2nd drop down not being filtered properly. Instead it populates all the available option values. I checked different posts here and tried filtering values before appending but, no avail so far.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select name="make"  id="make"&gt;
  &lt;option value="0"&gt;Select Make:&lt;/option&gt;
  &lt;option value="1"&gt;Acura&lt;/option&gt;
  &lt;option value="2"&gt;BMW&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;select name="model" id="model"&gt;
  &lt;option value="model"&gt;Select Model&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;label for="CarSize"&gt; Your car's size is : &lt;/label&gt;
  &lt;input type="text" name="carsize" id="size"&gt;
  
  Script:
  var a = {
  Cars:[
    {
      "id":1,
      "make":"Acura",
      "model":"2.2CL/3.0CL",
      "size":"Car"
    },
  {
      "id":12,
      "make":"Acura",
      "model":"RDX ",
      "size":"Compact SUV"
   },    
  {
      "id":10,
      "make":"Acura",
      "model":"MDX",
      "size":"Large SUV"
    },
   {
      "id":74,
      "make":"BMW",
      "model":"128",
      "size":"Car"
    },
    {
      "id":75,
      "make":"BMW",
      "model":"135",
      "size":"Car"
   },
  {
      "id":129,
      "make":"BMW",
      "model":"X3 ",
      "size":"Compact SUV"
    },
    {
      "id":130,
      "make":"BMW",
      "model":"X5",
      "size":"Large SUV"
    }
  ]
  };
     $("#make").change(function(){
  if ("#model" !='Select Model')
             $('#model').empty().append($('&lt;option&gt;&lt;/option&gt;').val('Select Model').html('Select Model'));
  else;
              $.each(a.Cars, function (key, value) {
             $("#model").append($('&lt;option&gt;&lt;/option&gt;').val(value.size).html(value.model
  
  ));
  
  });
  });
  
  $('#model').change(function () {
      //alert($(this).val());
      //var getModelval = $('#model').val();
      $('#size').val($(this).val());
      //$('#size').val(.val(id));
  
  });
  </code></pre>
  
  <p>Here is a fiddle link: <a href="http://jsfiddle.net/kamuflaj/6vvfr/9/" rel="nofollow noreferrer">http://jsfiddle.net/kamuflaj/6vvfr/9/</a></p>