Question

我有一个选择列表，我通过这种方式完成：

$.each(data, function(index, value) {
     $('#Cars').append('<option value="'+ index +'">'+ value +'</option>');
});

数据表如下所示：[{"0":"Ford","285":"Ferrari", "427":"Other"}]

我现在想要在我的选择列表中添加类别。该表将如下所示

["Cars":{"0":"Ford","285":"Ferrari", "427":"Other"},"Tractors":{"114":"Ferguson","115":"Others"}}]

你能帮我制作一些jquery代码吗？我尝试了一些但是没有结果。

我希望我的选择框在Html中看起来像这样：
<optgroup label="Cars"> <option>Ford</option> <option>Ferrari</option> <option>Other</option> </optgroup> <optgroup label="Tractors"> <option>Ferguson</option> <option>Other</option> </optgroup>

Answer 1

您可以尝试循环嵌套哈希：

var select = '';
$.each(data, function(key, value) {
   select += '<optgroup label="'+ key +'">'
   $.each(value, function(k, v) {
       select += '<option value="'+ k +'">'+ v +'</option>'
   })
   select += '</optgroup>'
});

Fiddle

Answer 2

这是demo

您的初始数据应该是正确格式化的关联数组：

var items = {"Cars":{"0":"Ford","285":"Ferrari", "427":"Other"},"Tractors":{"114":"Ferguson","115":"Others"}};

并使用＆＃39;进入＆＃39;循环你解决你的任务。

for(catName in items)
{ 
    var optGroup = $("<optgroup />", {
        label: catName
    });
    for(propName in items[catName])
    {
        var option = $("<option />", {
            text: items[catName][propName],
            value: propName
        });
        optGroup.append(option);
    }
    $("#Cars").append(optGroup);
}

在jquery中使用optgroup完成选择列表

2 个答案: