Question

我有一个简单的HTML页面，我想从JSON文件中读取对象，并使用JavaScript在下拉列表中显示它们作为选项。 HTML和JSON如下：

HTML

<html>
  <body>
    <select id="myid">MyList</select>
    <script src="myscript.js"></script>
  </body>
</html>

JSON

[{"Mode":"CARD"},
{"Mode":"CASH"},
{"Mode":"CHEQUE"}];

任何帮助w.r.t.非常感谢JavaScript！

Answer 1

工作和测试代码，用于使用javascript读取外部本地JSON文件（data.json），首先使用以下数据创建data.json文件：

data = '[{"Mode":"CARD"}, {"Mode":"CASH"}, {"Mode":"CHEQUE"}]';

在脚本标记

中提及JSON文件的路径

<html>
    <script type="text/javascript" src="data.json"></script>
    <script>
        function addOptions(){
            var jsonArray = JSON.parse(data);
            var select = document.getElementById('dd');
            var option;
            for (var i = 0; i < jsonArray.length; i++) {
              option = document.createElement('option');
              option.text = jsonArray[i]["Mode"];
              select.add(option);
            }
        }
    </script>
    <body onload="addOptions();">
        <select id="dd"></select>
    </body>
</html>

Answer 2

如果您的服务器资源返回以下内容的 / myjson

[ { "Mode": "CARD" }, { "Mode": "CASH" }, { "Mode": "CHEQUE" } ]

然后使用JavaScript创建<option>元素。

$.ajax({ url:'/myjson', type:'GET', dataType: 'json', success: function( json ) { $.each(json, function(i, value) { $('#myid').append($('<option>').text(value).attr('value', value.Mode)); }); } });

在下拉列表中将JSON对象显示为选项

2 个答案: