javascript - 将 json 加载到选择标签 +js

Question

如何将此 json 填充到选择标记中

var data = {
"266": "Andy Employee II",
"26": "Annette Oliveira",
"214": "Edwina Umeyor",
"39": "Eva Britton",
"193": "Leigh Otterson",
"68": "Louise Edelston",
"71": "Margaret Williams",
"97": "Simon Harris"
};

在线编辑链接在这里。

Answer 1

有很多方法可以做到这一点：您可以构建一个 HTML 字符串并将其填充到 DOM 中，您可以创建标签并逐个select附加标签，或者您可以使用众多客户端框架之一option，其中大多数有办法通过模板来做到这一点。

只是为了好玩，这里是你如何在纯 JS 中做到这一点，没有框架：

var data = {
  "266": "Andy Employee II",
  "26": "Annette Oliveira",
  "214": "Edwina Umeyor",
  "39": "Eva Britton",
  "193": "Leigh Otterson",
  "68": "Louise Edelston",
  "71": "Margaret Williams",
  "97": "Simon Harris"
};

// Grab a reference to the element to which 
// which we want to append the select tag, in 
// this case the body.  
var body = document.getElementsByTagName('body')[0];

// Create the select tag
var select = document.createElement('select');

var key, option, text;

// Loop over our data, creating an option tag
// for each and appending it to the select tag.
for (key in data) {
  option = document.createElement('option');
  option.value = key;
  text = document.createTextNode(data[key]);
  option.appendChild(text);
  select.appendChild(option);    
}

// Insert the select tag into the DOM.
body.appendChild(select);

这是一个在行动中的小提琴

Answer 2

您应该能够使用 jquery.each 遍历 JSON 数组。

jQuery.each(json_data, function(index, value) {
    $("#myselect").append("<option value='" + index + "'>" + value + "</option>");
});

编辑：根据下面的评论——你必须先用 $.parseJSON() 解析 JSON 结构，然后在结果值上运行上面的代码（除非你用 $.getJSON 检索原始数据，在这种情况下它将收到时已经解析。

Answer 3

在这种情况下，我有来自 Ajax 回调的 Json。所以你必须确保 Jsone 不是字符串。

data = jQuery.parseJSON(data);    
var select = $('#ShiftUserId');

进而

$.each(data, function(key, val){
var option = $('<option/>');
option.attr('value', key)
      .html(val)
      .appendTo(select);
});

或者

    data = jQuery.parseJSON(data);        
    data = jQuery.parseJSON(data);    
    jQuery.each(data, function(index, value) {
        console.log(index);
        $('#ShiftUserId').append( $('<option></option>').val(index).html(value) );
    });

或者

下面回答