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