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

只更改DOM一次......

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

Answer 3

fiddle

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

Answer 4

解决方案是创建自己的jquery插件，该插件接受json映射并使用它填充select。

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

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

Answer 6

我刚刚在Chrome中使用了javascript控制台来执行此操作。我用占位符替换了你的一些东西。

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

输出：

＆lt; option value =“0”＆gt; one＆lt; / option＆gt;＆lt; option value =“1”＆gt; two＆lt; / option＆gt;＆lt; option value =“2”＆gt; three＆lt; / option＆gt;

然而，看起来您的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 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>');
        });
    });
}

Answer 8

我相信这可以帮到你：

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

jQuery--填充从json中选择

8 个答案: