javascript - Create html select with optgroup from json - Stack Overflow

admin管理员组

文章数量:1287849

I have a JSON string (from php json_encode) that looks like;

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

I want to be able to create an html select using Javascript/jQuery in the form;

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

In terms of processing the json I get this far (not far I know), but jsFiddle fails to run it and freezes my browser.

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

I have a JSON string (from php json_encode) that looks like;

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

I want to be able to create an html select using Javascript/jQuery in the form;

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

In terms of processing the json I get this far (not far I know), but jsFiddle fails to run it and freezes my browser.

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

• javascript
• jquery
• json

Share Improve this question Follow edited Dec 21, 2012 at 21:54 Jon Adams 25.1k1818 gold badges8484 silver badges121121 bronze badges asked Dec 19, 2012 at 16:21 RooneylRooneyl 7,90266 gold badges5656 silver badges8282 bronze badges 2

• 5 Set your fiddle to use jQuery instead of MooTools, and it seems to run just fine jsfiddle/DVKMK/1 – Michael Berkowski Commented Dec 19, 2012 at 16:24
• He is trying to dynamically create the <selects>, his JS doesn't do that. – webnoob Commented Dec 19, 2012 at 16:56

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

This should run just fine.

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

本文标签： javascriptCreate html select with optgroup from jsonStack Overflow