jQuery - Wypełnij wybierz z json'a

Question

Mam mapę w mojej sewilecie java i konwertuję ją do formatu json, który działa poprawnie.

Kiedy wykonuję tę funkcję poniżej, tworzy rozwijane, ale umieszcza każdy znak jako opcję? To jest to, co mam:

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

zawartość map w formacie JSON

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

Answer 1

chciałbym zrobić coś takiego:

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

JSON struktury będą mile widziane. Na początku możesz eksperymentować z find('element') - to zależy od 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

używałem konsoli JavaScript w Chrome to zrobić. Wymieniłem niektóre z twoich rzeczy z symbolami zastępczymi.

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

wyjściowa:

< wartość opcji = "0"> jedna wartość </pozycja> < opcja = "1"> dwa wartość </pozycja> < opcja = "2"> trzy </option>

Wygląda jednak na to, że Twój json to prawdopodobnie ciąg znaków, ponieważ poniższe czynności zakończą się tym, co opisujesz. Stwórz swój JSON rzeczywisty JSON nie ciąg.

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

Wierzę, że to może pomóc:

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

zmienić tylko raz DOM ...

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

Answer 6

To działa dobrze w Ajax oddzwonić do aktualizacji wybierz z JSON obiektu

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

Rozwiązaniem jest crea twoja własna wtyczka jQuery, która bierze mapę json i zapełnia ją zaznaczeniem.

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

Można nazwać to w ten sposób:

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

z zalet jest, że gdziekolwiek będziesz musiał stawić czoła ten sam problem po prostu zadzwonić

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

Et voila!

Możesz dodać funkcje w swojej wtyczce jak chcesz

Answer 8

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