從json數據創建下拉菜單

我期待顯示來自「conta」，「zip，city，street_a，street_b」，「count，number」的數據並從「contact」鍵創建一個下拉菜單，但這不會在哪裏，有人可以解釋這將如何工作，這是我得到了我所擁有的遠。從json數據創建下拉菜單

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQuery</title> 
<!-- script type='text/javascript' href='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script --> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 

data = [ 
{"conta":"13356","name":"MISS Two"}, 
{"zip":"01111","city":"NASHUA, MA","street_a":"10 MAIN ROAD SQUARE","street_b":"Nothing"}, 
{"count":"544","number":"250"}, 
[ 
    {"contact":"Mark Bre"}, 
    {"contact":"Mary Lou"}, 
    {"contact":"John Ton"}, 
    {"contact":"Carls Des"}, 
    {"contact":"Carlos Drt"} 
] 
] 

$('body').append('<select id="dynamicSelect"></select>'); 
var options=""; 
$.each(data,function(i1,val1){ 
    if($.isArray(val1)){ 
     $.each(data,function(i2,val2){ 
      options += "<option value="+ val2.contact +">" + val2.contact + "</option>" 
     }); 
    } 
} 
$('#dynamicSelect').append(options); 

</script> 
</head> 

<body> 
The Select:<select id="dynamicSelect"> 
<option value="option value" selected="selected">option html</option> 
</select> 
</body> 

</html>

來源

2013-03-19 Andre

後您檢查主數組元素是一個數組，你再傳給主陣列的each創建選項，而不是嵌套的數組

變化：

if($.isArray(val1)){ 
     $.each(data,function(i2,val2){ 
      options += "<option value="+ val2.contact +">" + val2.contact + "</option>" 
     }); 
}

TO：

if($.isArray(val1)){ 
     /* loop over "val1"*/ 
     $.each(val1,function(i2,val2){ 
      options += "<option value="+ val2.contact +">" + val2.contact + "</option>" 
     }); 
}

還你需要用你的代碼docment.ready，該select標籤存在

包裹前

$(function(){ 
    /* run code here*/ 

});

所有代碼你缺少一些結束括號爲第一each代碼發射。使用瀏覽器控制檯檢查拋出的錯誤

來源

2013-03-19 00:32:05 charlietfl

明白並抓住數據的其他元素; 「conta」，「zip，city，street_a，street_b」，「count，number」它應該循環到數組中的哪個位置？ – Andre 2013-03-19 00:57:28

首先，你的JS代碼中有一些錯誤。

您需要終止功能的外各內有)
到.each()內呼叫應遍歷val1，而不是data再次

// Dynamically add a label for the select to the body 
var label = $('<label id="dynamicSelectLabel" for="dynamicSelect">The Select</label>').appendTo('body'); 
// Dynamically add the select to the body 
var select = $('<select id="dynamicSelect"></select>').appendTo('body'); 
// For each value in the data array 
$.each(data, function (i1, val1) { 
    // If the value is an array 
    if ($.isArray(val1)) { 
     // For each value in the contact array 
     $.each(val1, function (i2, val2) { 
      // Add an option to the select with the contact name and value 
      select.append('<option value=' + val2.contact + '>' + val2.contact + '</option>'); 
     }); 
    } 
});

DEMO

來源

2013-03-19 00:32:22

從json數據創建下拉菜單

回答

相關問題