基于json数据创建动态下拉列表

Question

我有这样的json数据。

data = [{"value": "One", "value2": "1"},
{"value": "Two", "value2": "2"},
{"value": "Three", "value2": "3"},
{"value": "Four", "value2": "4"}]

我想创建标签为value且数据值为value2的下拉列表。

我可以通过将任何一个列传递给这样的数组来创建一个下拉列表。

chart_data = [];

data.forEach(function(d) {
   chart_data.push(d.value)
})

["one","two","three"] // result

使用该结果，我使用jquery的$.each()函数创建一个下拉列表。

$.each(chart_data, function(i, val) {
       $('#dropdown').append('' + val + '');
})

但在那里，我只能使用单列创建。

我希望从两个列值创建一个下拉列表，其中1个用于标签，另一个用于数据值。

Answer 1

试试这个

data.forEach(function(d) {
  var option = "<option value='"+d.value2+"'>"+d.value+"</option>";
  $('#dropdown').append(option);
})

Answer 2

你真的不需要制作一个阵列，我不知道你为什么要这样做

只需使用数据字段填充下拉列表

即可

$.each(data, function(i, obj) {
   $('#dropdown').append(new Option(obj.value, obj.value2));
});

Answer 3

在数据阵列上运行每个。

$.each(data, function(i, o) {
  $('#dropdown').append('<option value="' + o.value + '">' + o.value2 + '</option>');
});