Question

我有一个JSON字符串，我想从中创建多个选择框。但问题是，一个值在JSON文件中隐藏得更深。此外，json文件是动态创建的，因此一切都应该动态工作。

所以我的问题是如何创建选择框，以及如何将JSON文件中更深层的值放到同一个选择框中？

JSON

{

    "product": {
options": {

    "58395": {
        "id": 58395,
        "title": "Size",
        "values": {
            "220544": {
                "id": 220544,
                "title": "36",
                "active": true
            },
            "220545": {
                "id": 220545,
                "title": "37",
                "active": false
            },
            "220546": {
                "id": 220546,
                "title": "38",
                "active": false
            },
            "220547": {
                "id": 220547,
                "title": "39",
                "active": false
            }
        }
    },
    "61295": {
        "id": 61295,
        "title": "Color",
        "values": {
            "231911": {
                "id": 231911,
                "title": "Zwart",
                "active": true
            },
            "231912": {
                "id": 231912,
                "title": "Bruin",
                "active": false
            },
            "231913": {
                "id": 231913,
                "title": "Rood",
                "active": false
            }
        }
    },
    "61296": {
        "id": 61296,
        "title": "Fabric",
        "values": {
            "231914": {
                "id": 231914,
                "title": "1",
                "active": true
            },
            "231915": {
                "id": 231915,
                "title": "2",
                "active": false
            },
            "231916": {
                "id": 231916,
                "title": "3",
                "active": false
            }
        }
    }

}, // etc....

所以我尝试做的是创建3个选择框 - ＆gt;尺寸，颜色和面料。这些选择框内必须有value title。所以你会得到类似的东西：

<option value=' + option.id + '>' + value.title + '</option>

所以我试过的是这个，显然不起作用：

  $.getJSON(url, function (data){
    var $selectOptions = $('<select />');
    $.each(data.product.options, function (index, option){
        var ids = "";
        $.each(options.values, function (i, v) { ids += " " + v.id; });
        $selectOptions.append('<option value=' + option.id + '>' +option.value.title + ids + '</option>');
    }); //etcetc...

这只会生成一个包含所有选项名称的选择框。而不是价值标题。

任何人都可以帮助我。我真的无法解决这个问题。

谢谢！

Answer 1

如果我理解......你想为每个选项创建3个选择盒装的选项，并将值作为选项......

为什么你不试这个

$.getJSON(url, function (data){
     var $selectOptions = $('<div />');
     $.each(data.product.options, function (index, option){
        var select = $('<select />');
        $.each(option.values, function (i, value) { 
            select.append('<option value=' + value.id + '>' + value.title + '</option>');
        });
        $selectOptions.append('<label>' + option.value + '</label>');
        $selectOptions.append(select);
}); //etcetc...

我希望这可以帮助你根据自己的喜好修改......

Answer 2

或许你想要这个

$.getJSON(url, function (data){
     var $selectOptions = $('<div />');
     $.each(data.product.options, function (index, option){
        var select = $('<select />');
        $.each(option.values, function (i, value) { 
            select.append('<option value=' + value.id + '>' + option.title + ': ' + value.title + '</option>');
        });
        $selectOptions.append(select);
}); //etcetc...

Answer 3

您需要为options数组对象的每个成员构建一个select。用以下内容替换$ .getJSON（）回调：

var products_el = $('#products');
$.getJSON(url, function(product_data) {
    for(var product_id in product_data) {
        var product = product_data[product_id];
        var product_el = $('<div class="product"><h3>' + product_id + '</h3></div>').appendTo(products_el);
        product_el.attr('id',product_id);
        for(var select_id in product.options) {
            var select = product.options[select_id];
            var select_wrap = $('<p><b>' + select.title + ' </b></p>').appendTo(product_el);
            var select_el = $('<select name="' + select_id + '" id="select_' + select_id + '"/>').appendTo(select_wrap);
            for(var option_id in select.values) {
                var option = select.values[option_id];
                var option_el = $('<option value="' + option.id + '" ' + (option.active ? 'selected' : '') + '>' + option.title + '</option>').appendTo(select_el);
            }
        }
    }
})

JSFiddle：http://jsfiddle.net/4hr4tn3k/1/

从json和不同级别创建多个选择框

3 个答案: