jQuery-- Populate select from json

Question

У меня есть карта в моем java sevlet и конвертируется в 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);  
    }); 
}); 

содержание карты в формате JSON

{"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"> три </option>

Однако, похоже, что ваш 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

Это отлично работает в Ajax перезванивать для обновления выберите из объекта 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

Решение для креа т. е. ваш собственный 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,}); 

вуаля!

Вы можете добавлять функции в плагине, как вам нравится

Answer 8

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