从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数据创建下拉菜单

回答

相关问题