title: Create html select with optgroup from json
body: <p>I have a JSON string (from php json_encode) that looks like;</p>
  
  <pre><code>var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}];
  </code></pre>
  
  <p>I want to be able to create an html select using Javascript/jQuery in the form;</p>
  
  <pre><code>&lt;select&gt;
      &lt;optgroup label="Foo"&gt;
          &lt;option value="1"&gt;aaa&lt;/option&gt;
          &lt;option value="2"&gt;bbb&lt;/option&gt;
      &lt;/optgroup&gt;
      &lt;optgroup label="Bar"&gt;
          &lt;option value="3"&gt;ccc&lt;/option&gt;
          &lt;option value="4"&gt;ddd&lt;/option&gt;
      &lt;/optgroup&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>In terms of processing the json I get <a href="http://jsfiddle.net/DVKMK/" rel="nofollow">this far</a> (not far I know), but jsFiddle fails to run it and freezes my browser.</p>
  
  <pre><code>var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}];
  
  $.each(json, function(i,group) {
      console.log(i);
      $.each(group, function(j, option) {
          console.log(j, option);
          $.each(option, function(k, item) {
              console.log(k, item);
          });
      });
  });​
  </code></pre>