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