将树json数据填充到下拉框中

时间:2015-07-06 03:25:30

标签: javascript jquery json dropdownbox

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

所以我想把这些数据填充到Dropdown框中,如下所示:

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

树视图是否允许子设备的选择值名称?

2 个答案:

答案 0 :(得分: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);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
&#13;
&#13;
&#13;

希望这有帮助。

答案 1 :(得分:1)

您可以看到以下链接: http://www.jeasyui.com/demo/main/index.php?plugin=ComboBox 然后从左侧面板中选择Group ComboBox。 也许帮助你