jQuery--从json填充选择

Question

我在我的java sevlet中有一张地图并将其转换为正确的json格式。

当我在下面执行此功能时，会创建一个下拉菜单，但它会将每个字符作为选项？ 这是我的了：JSON格式

$(document).ready(function(){ 
    var temp= '${temp}'; 
    //alert(options); 
    var $select = $('#down');       
    $select.find('option').remove();       
    $.each(temp, function(key, value) {    
     $('<option>').val(key).text(value).appendTo($select);  
    }); 
}); 

地图内容

{"1" : "string","2" : "string"} 

Answer 1

我会做这样的事情：

$.each(temp,function(key, value) 
{ 
    $select.append('<option value=' + key + '>' + value + '</option>'); 
}); 

JSON结构，将不胜感激。起初你可以试用find('element') - 它取决于JSON。

Answer 2

fiddle

var $select = $('#down'); 
$select.find('option').remove(); 
$.each(temp,function(key, value) 
{ 
    $select.append('<option value=' + key + '>' + value + '</option>'); 
}); 

Answer 3

我只是用JavaScript控制台在Chrome中做到这一点。我用占位符替换了一些你的东西。

var temp= ['one', 'two', 'three']; //'${temp}'; 
//alert(options); 
var $select = $('<select>'); //$('#down');       
$select.find('option').remove();       
$.each(temp, function(key, value) {    
    $('<option>').val(key).text(value).appendTo($select); 
}); 
console.log($select.html()); 

输出：

<选项值= “0”>一个< /选项> <选项值= “1”> 2 < /选项> <选项值= “2”> 3 < /选项>

但是它看起来像你的JSON可能是一个字符串，因为以下最终会做你的描述。所以让你的JSON实际的JSON不是一个字符串。

var temp= "['one', 'two', 'three']"; //'${temp}'; 
//alert(options); 
var $select = $('<select>'); //$('#down');       
$select.find('option').remove();       
$.each(temp, function(key, value) {    
    $('<option>').val(key).text(value).appendTo($select); 
}); 
console.log($select.html()); 

Answer 4

我相信这可以帮助你：

$(document).ready(function(){ 
    var temp = {someKey:"temp value", otherKey:"other value", fooKey:"some value"}; 
    for (var key in temp) { 
     alert('<option value=' + key + '>' + temp[key] + '</option>'); 
    } 
}); 

Answer 5

只有改变DOM一次...

var listitems = ''; 
$.each(temp, function(key, value){ 
    listitems += '<option value=' + key + '>' + value + '</option>'; 
}); 
$select.append(listitems); 

Answer 6

，在阿贾克斯做工精细回调从JSON对象

更新选择

function UpdateList() { 
    var lsUrl = '@Url.Action("Action", "Controller")'; 

    $.get(lsUrl, function (opdata) { 

     $.each(opdata, function (key, value) { 
      $('#myselect').append('<option value=' + key + '>' + value + '</option>'); 
     }); 
    }); 
} 

Answer 7

一种解决方案是CREA你自己的jquery插件采用json地图并用它填充选择。

(function($) {  
    $.fn.fillValues = function(options) { 
     var settings = $.extend({ 
      datas : null, 
      complete : null, 
     }, options); 

     this.each(function(){ 
      var datas = settings.datas; 
      if(datas !=null) { 
       $(this).empty(); 
       for(var key in datas){ 
        $(this).append('<option value="'+key+'"+>'+datas[key]+'</option>'); 
       } 
      } 
      if($.isFunction(settings.complete)){ 
       settings.complete.call(this); 
      } 
     }); 

    } 

}(jQuery)); 

您可以通过这样称呼它：

$("#select").fillValues({datas:your_map,}); 

的优点是，任何地方，你也会面临同样的问题，你只需要调用

$("....").fillValues({datas:your_map,}); 

的Et瞧！

，只要你喜欢

Answer 8

$(JSON.parse(response)).map(function() { 
    return $('<option>').val(this.value).text(this.label); 
}).appendTo('#selectorId');