如何从外部JSON文件中读取数据以填充下拉框？ [英] How to read data from external JSON file to populate the dropdown box?

问题描述

我在JS文件中填充了JSON结构的下拉框，但我需要来自外部文件的JOSN数据。



我有什么试过：

I have populated the dropdown box with JSON structure inside the JS file , but I need to the JOSN data from external file.

What I have tried:

var jsonData = {
                                   "Table": [{
                                       "stateid": "2",
                                       "statename": "AP"
                                   }, {
                                       "stateid": "3",
                                       "statename": "TL"
                                   }, {
                                       "stateid": "4",
                                       "statename": "Kewrala"
                                   }, {
                                       "stateid": "5",
                                       "statename": "TN"
                                   }, {
                                       "stateid": "6",
                                       "statename": "WR"
                                   }]
                               };

$(document).ready(function () {
    var listItems = '<option selected="selected" value="0">- Select -</option>';

    for (var i = 0; i < jsonData.Table.length; i++) {
        listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>";
    }

    $("#DLState").html(listItems);
});

推荐答案

（document）.ready（function（）{
var listItems ='< option selected =selectedvalue =0> - 选择 - < / option>';

for（var i = 0; i< jsonData.Table.length ; i ++）{
listItems + =< option value ='+ jsonData.Table [i] .stateid +'>+ jsonData.Table [i] .statename +< / option> ;
}

(document).ready(function () { var listItems = '<option selected="selected" value="0">- Select -</option>'; for (var i = 0; i < jsonData.Table.length; i++) { listItems += "<option value='" + jsonData.Table[i].stateid + "'>" + jsonData.Table[i].statename + "</option>"; }

（＃DLState）。html（listItems）;
}）;

("#DLState").html(listItems); });

使用jQuery的getJSON



jQuery getJSON（）方法 [ ^ ]



您可以在文档就绪事件中执行此操作，然后您准备好文档中的代码将移至成功getJSON事件，该链接中的结果与现有代码中的jsonData匹配。

Use jQuery's getJSON

jQuery getJSON() Method[^]

You would do that in the document ready event, then the code you have in document ready you would move to the "success" event of getJSON where "result" in that link matches "jsonData" in your existing code.

这篇关于如何从外部JSON文件中读取数据以填充下拉框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！