javascript - 将树json数据填充到下拉框

我有树格式的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

还是树视图允许选择子设备的值名称？

最佳答案

这个给你：

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>

希望这可以帮助。

关于javascript - 将树json数据填充到下拉框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31237358/