jQuery-从json填充select

我有我的Java Sevlet中的地图，并将其转换为JSON格式，正确的。

当我在下面做这个function时，会创build一个下拉菜单，但是它将每个字符作为一个选项？ 这是我得到的：

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

一个解决scheme是创build自己的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瞧！

你可以在你的插件中添加function

Answer 4

小提琴

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

Answer 5

我只是在Chrome中使用JavaScript控制台来做到这一点。 我用占位符replace了一些你的东西。

 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 option value =“0”> one </ option> <option value =“1”> two </ option> <option value =“2”> three </ option>

然而，它看起来像你的JSON可能实际上是一个string，因为以下将最终做你所描述的。 所以让你的JSON实际的JSON不是一个string。

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

Answer 7

在Ajax中的工作正常callback更新从JSON对象中select

 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

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