61

我的 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"}
4

8 回答 8

85

我会做这样的事情：

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

JSON结构将不胜感激。一开始你可以尝试find('element')——它依赖于 JSON。

于 2013-05-08T13:51:55.280 回答
50

只更改一次 DOM...

var listitems = '';
$.each(temp, function(key, value){
    listitems += '<option value=' + key + '>' + value + '</option>';
});
$select.append(listitems);
于 2014-10-22T18:17:04.970 回答
11

小提琴

var $select = $('#down'); 
$select.find('option').remove();  
$.each(temp,function(key, value) 
{
    $select.append('<option value=' + key + '>' + value + '</option>');
});
于 2013-05-08T13:57:52.180 回答
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,});

瞧！

您可以根据需要在插件中添加功能

于 2015-07-29T12:13:01.757 回答
3 
$(JSON.parse(response)).map(function () {
    return $('<option>').val(this.value).text(this.label);
}).appendTo('#selectorId');
于 2017-01-10T14:26:30.093 回答
2

我只是使用 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());

输出：

<option value="0">一个</option><option value="1">两个</option><option value="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());
于 2013-05-08T13:58:52.060 回答
1

这在 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>');
        });
    });
}
于 2015-04-16T14:12:59.893 回答
-1

我相信这可以帮助你：

$(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>');
    }
});
于 2013-05-08T14:06:55.733 回答