将树 json 数据填充到下拉框

Question

我有 json 树格式的数据：

[
  {
    "beer_names": [
      "Apple Ale",
      "Bad Seed Pumpkin Ale"
    ],
    "brewery": "Basil T's Brew Pub and Italian Grill"
  },
  {
    "beer_names": [
      "5 C's IPA",
      "Bottle Rocket IPA",
      "Kate The Great Russian Imperial Stout",
      "Wheat Wine"
    ],
    "brewery": "Portsmouth Brewery"
  },
  {
    "beer_names": [
      "Black Forest Dunkelweizen",
      "Equinox E.S.B.",
      "Evolutionary IPA",
      "G.E. Lite",
      "Nut Brown",
      "Red",
      "Smoked Porter"
    ],
    "brewery": "Glen Ellyn Sports Brew"
  }
]

所以我想像这样将这些数据填充到下拉框中：

--Basil T's Brew Pub and Italian Grill
--------Apple Ale
--------Bad Seed Pumpkin Ale
--Portsmouth Brewery
--------5 C's IPA
--------Bottle Rocket IPA
--------Wheat Wine
--------Kate The Great Russian Imperial Stout
--Glen Ellyn Sports Brew
--------Black Forest Dunkelweizen
--------Equinox E.S.B.
--------Evolutionary IPA
--------G.E. Lite
--------Nut Brown
--------Red
--------Smoked Porter

或者树视图允许 select 子设备的值名称？

Answer 1

你可以看到这个link： http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox 然后您 select 从左侧面板对 ComboBox 进行分组。也许能帮到你

Answer 2

你在这里：

var data = [{
  "beer_names": [
    "Apple Ale",
    "Bad Seed Pumpkin Ale"
  ],
  "brewery": "Basil T's Brew Pub and Italian Grill"
}, {
  "beer_names": [
    "5 C's IPA",
    "Bottle Rocket IPA",
    "Kate The Great Russian Imperial Stout",
    "Wheat Wine"
  ],
  "brewery": "Portsmouth Brewery"
}, {
  "beer_names": [
    "Black Forest Dunkelweizen",
    "Equinox E.S.B.",
    "Evolutionary IPA",
    "G.E. Lite",
    "Nut Brown",
    "Red",
    "Smoked Porter"
  ],
  "brewery": "Glen Ellyn Sports Brew"
}];
$.each(data, function(index, value) {
  var str = '<optgroup label="' + value["brewery"] + '">';
  $.each(value['beer_names'], function(index, value) {
    str += '<option value="' + value + '">' + value + '</option>';
  });
  str += '</select>';
  $('select').append(str);
});

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

希望对您有所帮助。

将树 json 数据填充到下拉框

Fill tree json data to dropdown box

javascript

jquery

json

dropdownbox