JQuery-- Начать выбор из json

У меня есть карта в моем 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"}

Ответ 1

Я бы сделал что-то вроде этого:

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

Структура JSON будет оценена по достоинству. Сначала вы можете экспериментировать с find('element') - это зависит от JSON.

Ответ 2

Изменить только DOM...

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

Ответ 3

Решением является создание собственного плагина 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 voila!

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

Ответ 4

fiddle

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

Ответ 5

Я просто использовал консоль 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());

Вывод:

< option value = "0" > one </option> < option value = "1" > two </option> < option value = "2" > three </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());

Ответ 6

Я считаю, что это может вам помочь:

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

Ответ 7

Это отлично работает в 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>');
        });
    });
}

Ответ 8

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