如何从json数组获取值填充选区（下拉列表）

Question

我是jquery新手，目前正在phonegap中构建应用程序...

我需要在下拉列表中显示一个值列表。

 "data": [
    {
      "city_id": "1",
      "city": "test1"
    },
    {
      "city_id": "2",
      "city": "test2"
    },
]

我得到这样的数据...我想将这些值填写在表格中的下拉列表中。 当用户在表单中选择城市时，我希望表单在发布表单数据时发布city_id。...

任何帮助都将受到赞赏。

Answer 1

jQuery非常简单

HTML

<select></select>

JS

var d = '"data": [{"city_id": "1","city": "test1"},{"city_id": "2","city": "test2"}]';
var d = JSON.parse('{'+d+'}');

$.each(d.data, function(index, value){
  $('select').append('<option value="'+value.city_id+'">'+value.city+'</option>')
});

在那里，您拥有了！

这是一个JSfiddle

Answer 2

您可以通过jquery将每个这些选项动态地加载到<select> html元素中。

每个选项都将城市显示为文本，将city_id显示为值。 JS通过函数JSON.parse()将JSON解析为JS对象。

这是您可以参考的代码块：

var data = JSON.parse(*your data above*); // This is now an array
var $menu = $('#menu'); // this is in reference to the <select> menu you have in your HTML that you are appending to
for (var i = 0; i < data.length; i++) {
    var city = data[i];
    $menu.append('<option value='+city.city_id+'>'+city.city+'</option>');
}

这将基于JSON填充菜单，您可以将整个内容包装在一个元素中，以便它将通过表单提交中当前选择的选项。

Answer 3

您可以将城市显示为文本，将city_id显示为标签中的attr“ city_id”：

<div city_id="(city_id)">(city)</div>

并在使用jquery单击时显示。

$("div[city_id]").click(function(){
alert($(this).attr("city_id"));
})

听到一些例子： https : //jsfiddle.net/RomanGroovyDev/hh2ydecb/

Answer 4

您可以尝试以下方法：

HTML

<select></select>

数据

var dataObj =  {"data": [
    {
      "city_id": "1",
      "city": "test1"
    },
    {
      "city_id": "2",
      "city": "test2"
    },
]}

脚本

使用forEach：

dataObj.data.forEach(function (obj) {        
   $("<option />", {value: obj.city_id, text: obj.city}).appendTo($('select'));
})

用于：

for(i in dataObj.data) {
    $("<option />", {value: dataObj.data[i].city_id, text: dataObj.data[i].city}).appendTo($('select'));
}