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

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 个对象作为选项

Display JSON Objects as options in dropdown

javascript

html

json

html-select