使用jquery的jSON格式到Group Selection Box

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);

});

下面的工作代码段

＆＃13;

＆＃13;

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);
  
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个

＆＃13;

＆＃13;

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"
  }]
}];

var optGroup = '';
$.each(data, function(i, v) {
  optGroup += '<optgroup label="' + v.COM_DESC + '">';

  $.each(v.ITEM_DESC, function(j, jv) {
    optGroup += '<option value="' + jv.ITEM_CODE + '" >' + jv.ITEM_DESC + '</option>';
  })
  optGroup += '</optgroup>';

})

$('#com_parts').append(optGroup)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='com_parts'>

</select>

＆＃13;

＆＃13;

＆＃13;