0

これは私のJSONコードです

data = {
    "master_item":{
        "M5":{
            "PMBLT000164":"PMBLT000164"
        },
        "M8":{
            "PMBTN000020":"PMBTN000020"
        },
        "M165":{
            "PMBTN000003":"PMBTN000003","PMBTN000004":"PMBTN000004","PMBTN000006":"PMBTN000006","PMBTN000009":"PMBTN000009"
        }
    },
    "products":{
        "PMBTN000003":"PMBTN000003","PMBTN000002":"PMBTN000002"
    },
    "bulk":{
        "BBTPB000003":"BBTPB000003","BMBCT000002":"BMBCT000002"
    }
}

これが欲しいのはこれを3つのドロップダウンメニューに変換する必要がある

<select name='master_item'>
 <optgroup label="M5">
<option value="PMBLT000164">PMBLT000164</option>
</optgroup>
</select>

上記のHTMLはjsonデータに基づいています。

編集：

JQUERYで次のコードを試しました

var options = $("#options");
    $.each(data.master_item, function(i,a) {
    options.append($("<option />").val(a).text(a));
});
4

3 に答える 3

1

まあ、私はそれがこのようなもので行うことができると思います：

var $select = $('<select>').attr({
    name: 'master_item'
});

$.each(data.master_item, function(optGroupLabel, options) {
    var $optGroup = $('<optgroup>').attr({
        label: optGroupLabel
    });
    $.each(options, function(optionKey, optionValue) {
        var $option = $('<option>').attr({
            value: optionValue
        }).text(optionValue);
        $optGroup.append($option);
    });
    $select.append($optGroup);
});

$('body').append($select);

基本的に、これは2段階のプロセスであり、各段階でデータ構造をさらに深く掘り下げます。最初のレベルではoptgroupを処理し、2番目のレベルでは各optgroup内のオプションを処理します。

属性の追加を簡単にするためにハッシュを使用しました。.attr もう1つの重要なポイントは、構造全体をDOMに追加するのは、完成した後でのみです。

于 2012-09-13T11:31:17.683 に答える
1

このフィドルをチェックする関数を使用しました。他のソリューションに対するこれの利点：データには、必要な数のネストされたレベルを含めることができます。

var options = $("<select/>"),
    addOptions = function(opts, container){
        $.each(opts, function(i, opt) {
            if(typeof(opt)=='string'){
                container.append($("<option />").val(opt).text(opt));
            } else {
                var optgr = $("<optgroup />").attr('label',i);
                addOptions(opt, optgr)
                container.append(optgr);
            }
        });
    };

addOptions(data,options); // or addOptions(data.master_item,options);
$('body').append(options);
​
于 2012-09-13T11:37:39.883 に答える
0

あなたは正しい考えを持っていると思いますが、forループを使用する必要があると思います。

フィドル： http： //jsfiddle.net/stevenmtwhunt/ua7jw/

于 2012-09-13T11:36:34.657 に答える