Tworzenie html select z optgroup z json

Question

Mam ciąg JSON (z php json_encode), który wygląda jak;

var json = [{"Foo":[{"id":1,"name":"aaa"},{"id":2,"name":"bbb"}]},{"Bar":[{"id":3,"name":"ccc"},{"id":4,"name":"ddd"}]}]; 

Chcę mieć możliwość wyboru html za pomocą Javascript/jQuery w formularzu;

<select> 
    <optgroup label="Foo"> 
     <option value="1">aaa</option> 
     <option value="2">bbb</option> 
    </optgroup> 
    <optgroup label="Bar"> 
     <option value="3">ccc</option> 
     <option value="4">ddd</option> 
    </optgroup> 
</select> 

chodzi o przetwarzanie JSON mam this far (daleko nie wiem), ale jsFiddle zawiedzie go uruchomić i zawiesza przeglądarkę.

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); 
        }); 
    }); 
});​ 

Answer 1

To powinno działać dobrze.

var $select = $("<select>"); 
$select.appendTo("#somewhere"); 

$.each(json, function(i, optgroups) { 
    $.each(optgroups, function(groupName, options) { 
     var $optgroup = $("<optgroup>", {label: groupName}); 
     $optgroup.appendTo($select); 

     $.each(options, function(j, option) { 
      var $option = $("<option>", {text: option.name, value: option.id}); 
      $option.appendTo($optgroup); 
     }); 
    }); 
});