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"
};

Online to edit link here.

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

And here's a fiddle of this in action

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);
});

OR

    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) );
    });

OR

下面的答案

将json加载到select标签+ js中

3 个答案: