title: JQUERY: populating select box with optiongroup using json file
body: <p>I am not sure what is wrong with my code, I have a couple of select boxes with class <code>categories</code> and I am populating the options with a json object.</p>
  
  <p>here's my json file</p>
  
  <pre><code>[{
    "Apparel": [{
      "val": "Footwear",
     "text": "Footwear"
    }, {
     "val": "Lights",
     "text": "Lights"
    }, {
     "val": "Accessories",
     "text": "Accessories"
    }],
  
    "Automotive Parts": [{
      "val": "Hydraulic Parts",
      "text": "Hydraulic Parts"
     }, {
      "val": "Plastic Parts",
      "text": "Plastic Parts"
     }],
  }]
  </code></pre>
  
  <p>here's my jquery code.</p>
  
  <pre><code>$.getJSON("json/categories.json", function(json) {
      $.each(json,function (i,optgroups){
        $.each(optgroups, function(groupName, options) {
          var $optgroup = $("&lt;optgroup&gt;", {
                  label: groupName
          });
  
          $optgroup.appendTo('.categories');
  
          $.each(options, function(j, option) {
                  var $option = $("&lt;option&gt;", {
                      text: option.text,
                      value: option.val
                  });
                  $option.appendTo($optgroup);
              });
        });
      });
  });
  </code></pre>
  
  <p>the select box has a couple of options and each set of options falls under an optiongroup.</p>
  
  <p>the problem is the optiongroup labels are only populated and not the options.</p>