jquery - 使用 jquery 将 jSON 格式分组选择框

Question

我正在尝试将 jSON 格式转换为 HTML 格式的组选择框，如下所示:

 <option disabled selected value="">Computer Parts</option>
 <optgroup label="RAM">
   <option value="KING">Kingston</option>
   <option value="CORS">Corsair</option>
 </optgroup>
 <optgroup label="PSU">
   <option value="CM">Cooler Master</option>
   <option value="SEAS">Seasonic</option>
 </optgroup>

我的 JSON 格式如下:

[{
  "COM_DESC": "RAM",
  "ITEM_DESC": [{
    "$id": "1",
    "COM_CODE": "R",
    "COM_DESC": "RAM",
    "ITEM_CODE": "KING",
    "ITEM_DESC": "Kingston"
  }, {
    "$id": "2",
    "COM_CODE": "R",
    "COM_DESC": "RAM",
    "ITEM_CODE": "CORS",
    "ITEM_DESC": "Corsair"
  }]
}, {
  "COM_DESC": "PSU",
  "ITEM_DESC": [{
    "$id": "1",
    "COM_CODE": "P",
    "COM_DESC": "PSU",
    "ITEM_CODE": "CM",
    "ITEM_DESC": "Cooler Master"
  }, {
    "$id": "2",
    "COM_CODE": "P",
    "COM_DESC": "PSU",
    "ITEM_CODE": "SEAS",
    "ITEM_DESC": "Seasonic"
  }]
}]

我现在的代码如下，但这不适用于分组，而只是一个没有分组的一级选择框:

var jsonResult;
$.get("jSON_PCPARTS.php", function(data){
    jsonResult = data;

    $('#com_parts').attr('enabled', 'true');

    $.each(data, function() {
        $('#com_parts').append(
            $("<option></option>").text(this.ITEM_DESC).val(this.ITEM_CODE)
        );
    });
}, "json");

Answer 1

这里有一个选项:-

$.each(data, function() {

  var optgroup = $("<optgroup/>", { label:this.COM_DESC });

  $.each(this.ITEM_DESC, function() {

    optgroup.append($("<option/>").text(this.ITEM_DESC).val(this.ITEM_CODE));

  });

  $('#com_parts').append(optgroup);

});

下面的工作片段

var data = [{
  "COM_DESC": "RAM",
  "ITEM_DESC": [{
    "$id": "1",
    "COM_CODE": "R",
    "COM_DESC": "RAM",
    "ITEM_CODE": "KING",
    "ITEM_DESC": "Kingston"
  }, {
    "$id": "2",
    "COM_CODE": "R",
    "COM_DESC": "RAM",
    "ITEM_CODE": "CORS",
    "ITEM_DESC": "Corsair"
  }]
}, {
  "COM_DESC": "PSU",
  "ITEM_DESC": [{
    "$id": "1",
    "COM_CODE": "P",
    "COM_DESC": "PSU",
    "ITEM_CODE": "CM",
    "ITEM_DESC": "Cooler Master"
  }, {
    "$id": "2",
    "COM_CODE": "P",
    "COM_DESC": "PSU",
    "ITEM_CODE": "SEAS",
    "ITEM_DESC": "Seasonic"
  }]
}];

$.each(data, function() {

  var optgroup = $("<optgroup/>", { label:this.COM_DESC });
  
  $.each(this.ITEM_DESC, function() {
  
    optgroup.append($("<option></option>").text(this.ITEM_DESC).val(this.ITEM_CODE));
    
  });
  
  $('#com_parts').append(optgroup);
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="com_parts">
  <option disabled selected value="">Computer Parts</option>
</select>