JQUERY：使用json文件填充选项组的选择框

Question

我不确定我的代码有什么问题，我有几个带有类categories的选择框，我用json对象填充选项。

这是我的json文件

[{
  "Apparel": [{
    "val": "Footwear",
   "text": "Footwear"
  }, {
   "val": "Lights",
   "text": "Lights"
  }, {
   "val": "Accessories",
   "text": "Accessories"
  }],

  "Automotive Parts": [{
    "val": "Hydraulic Parts",
    "text": "Hydraulic Parts"
   }, {
    "val": "Plastic Parts",
    "text": "Plastic Parts"
   }],
}]

这是我的jquery代码。

$.getJSON("json/categories.json", function(json) {
    $.each(json,function (i,optgroups){
      $.each(optgroups, function(groupName, options) {
        var $optgroup = $("<optgroup>", {
                label: groupName
        });

        $optgroup.appendTo('.categories');

        $.each(options, function(j, option) {
                var $option = $("<option>", {
                    text: option.text,
                    value: option.val
                });
                $option.appendTo($optgroup);
            });
      });
    });
});

选择框有几个选项，每组选项都属于一个选项组。

问题是选项组标签只是填充而不是选项。

Answer 1

在第二个＆＃34; 每个＆＃34;之后移动 $ optgroup.appendTo（＆＃39; .categories＆＃39;）; 循环，应该工作。