Question

我有一个使用jQuery从 JSON (JSONP)文件中提取的对象数组。

我需要使用HTML下拉列表显示此数据。

当前代码：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript'>
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){

    console.log(data);


    })
</script>

如何使用HTML下拉列表显示要作为对象数组显示的data变量？

对象数组看起来像这样

Object
 lines: Array[10]
0: Object
   line: "COLOMBO - BADULLA"
 1: Object
 2: Object
 3: Object
 4: Object
 5: Object
 6: Object
 7: Object

JSON文件

( {"lines":[{"line":"COLOMBO - BADULLA"},{"line":"COLOMBO - MATALE"},{"line":"COLOMBO - PUTTLAM"},{"line":"COLOMBO - THANDIKULAM"},{"line":"COLOMBO - TALAIMANNAR"},{"line":"COLOMBO - BATTICALOA"},{"line":"COLOMBO - TRINCOMALEE"},{"line":"COLOMBO - MATARA"},{"line":"COLOMBO - AVISSAWELLA"},{"line":"COLOMBO - MIHINTALE"}]} );

Answer 1

这应该有效：

$(document).ready(function() {
    var oDDL = $("<select>");
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data) {
        $.each(data.lines, function(i, item) {
            oDDL.append('<option>' + item.line + '</option>');
        });
    });
    $("body").append(oDDL);
});

正如您所看到的，它正在构建下拉列表对象，并为JSON数组中的每个项目添加options。

注意：每个JSON响应都不同，data.lines和item.line仅匹配此特定案例的JSON格式。

Answer 2

如果你没有，你首先必须在你的html中创建一个元素：

<select id='myselect'></select>

然后，在你的js中，假设你每个项目都有.value y .caption属性：

$.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){
    for(var i=0; i<data.length; i++){ //Traverse the data array
       var value = data[i].value;
       var text = data[i].caption;
       $('<option/>').val(value).text(text).appendTo('#myselect');
    };
});

就是这样。希望这可以帮助。干杯

JavaScript下拉列表中的对象数组

2 个答案: