10

次のような 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 の処理に関しては、ここまで(私が知る限りではありません) 取得できますが、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);
        });
    });
});​
4

1 に答える 1

9

これで問題なく動作するはずです。

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);
        });
    });
});
于 2012-12-19T16:48:44.767 に答える