jQuery--填充从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

只更改一次DOM ...

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

Answer 3

小提琴

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

Answer 4

一种解决方案是创建您自己的 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,});

等等！

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