jQuery-- Chọn từ json

Question

Tôi có một bản đồ trong phần mềm java của tôi và chuyển nó sang định dạng json hoạt động đúng.

Khi tôi thực hiện chức năng này bên dưới, nó tạo ra một trình đơn thả xuống, nhưng nó đặt mọi ký tự như một tùy chọn? Đây là những gì tôi nhận:

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

nội dung bản đồ ở định dạng JSON

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

Answer 1

tôi sẽ làm một cái gì đó như thế này:

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

cấu trúc JSON sẽ được đánh giá. Lúc đầu, bạn có thể thử nghiệm với find('element') - nó phụ thuộc vào 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

tôi chỉ sử dụng giao diện điều khiển javascript trong Chrome để làm điều này. Tôi đã thay thế một số nội dung của bạn bằng trình giữ chỗ.

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

Output:

< tùy chọn value = "0"> một giá trị </option> tùy chọn < = "1"> hai </option> tùy chọn < value = "2"> ba </tùy chọn>

Tuy nhiên có vẻ như json của bạn có thể thực sự là một chuỗi vì sau đây sẽ làm những gì bạn mô tả. Vì vậy, hãy tạo JSON JSON thực tế của bạn chứ không phải chuỗi.

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

Tôi tin rằng điều này có thể giúp bạn:

$(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

Chỉ thay đổi DOM một lần ...

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

Answer 6

Đó hoạt động tốt trong Ajax gọi lại để cập nhật chọn từ JSON đối tượng

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

Giải pháp là crea te jquery plugin của riêng bạn có bản đồ json và điền vào lựa chọn với nó.

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

Bạn có thể gọi nó bằng cách làm này:

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

Những lợi thế được rằng bất cứ nơi nào bạn sẽ phải đối mặt với cùng một vấn đề bạn chỉ cần gọi

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

Et thì đấy!

Bạn có thể thêm chức năng trong plugin của bạn như bạn thích

Answer 8

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