使用json的optgroup創建html選擇

Question

我有一個JSON字符串（來自php json_encode），看起來像;

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

我希望能夠在窗體中使用Javascript/jQuery創建html選擇;

<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> 

在處理JSON方面我得到this far（不據我所知），但失敗的jsfiddle運行它，並凍結我的瀏覽器。

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

這應該運行得很好。

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