title: display select options based on previous selections
body: <p>i'm trying to display drop-down menus 'category'and subcategories. it's been a few years since I used javascript, so I am having some problems. the code I have simply is not populating the html select input. I don't know if the code is too simplistic or if I have just made some small error, but I cant seem to get it work. maybe someone can show me where I'm going wrong. Thanks.</p>
  
  <pre><code>&lt;html&gt;
      &lt;select name="cat" id="menu1" class="menu"&gt;&lt;/select&gt;
      &lt;select name="subcat" id="menu2" class="menu"&gt;&lt;/select&gt;
  &lt;/html&gt;
  
  &lt;script type = "text/javascript"&gt;
  
      var data = {
          "category":["sub-category"],
          "music": ["sub-category","rock", "punk"],
          "film": ["sub-categoy","comedy", "drama"],
          "tv": ["sub-catery","sit-com", "soap opera"],
      }
  
  
      for (var i in data) {
          $('#menu1').append('&lt;option&gt;' + i + '&lt;/option&gt;');
      }
  
  
      $('#menu1').change(function() {
          var key = $(this).val();
          $('#menu2').empty();
          for (var i in data[key]) {
              $('#menu2').append('&lt;option&gt;' + data[key][i] + '&lt;/option&gt;');
          }
      }).trigger('change');
  
  &lt;/script&gt;
  </code></pre>