使用json中的optgroup创建html选择

我有一个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选择;

   aaa bbb   ccc ddd   

在处理json方面我得到了这么远 （我不知道），但是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.appendTo("#somewhere"); $.each(json, function(i, optgroups) { $.each(optgroups, function(groupName, options) { var $optgroup = $("", {label: groupName}); $optgroup.appendTo($select); $.each(options, function(j, option) { var $option = $("", {text: option.name, value: option.id}); $option.appendTo($optgroup); }); }); });