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