将 JSON 字符串绑定到下拉列表 [关闭]答案

【问题标题】：Binding JSON string to dropdownlist [closed]将 JSON 字符串绑定到下拉列表 [关闭]
【发布时间】：2015-09-17 09:47:31
【问题描述】：

我的下拉列表 id 是 'DropdownList'

我的 json 字符串是这种形式：

[{"Domain":"domain"}]

如何将 JsonString 绑定到下拉列表？

【问题讨论】：

请更具体。

标签： json dropdown

【解决方案1】：

所以继续使用一些虚拟数据，在这里你可以做的是 - 在名为 data.json 的文件中拥有一个 JSON 为：

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

将src 标签添加到您的HTML，这样它就知道在哪里可以找到JSON：

<script type="text/javascript" src="data.json"></script>

然后在您的JavaScript 中具有以下功能 -

function addOptions(){
        var jsonArray = JSON.parse(data);
        var select = document.getElementById('DropdownList');
        var option;
        for (var i = 0; i < jsonArray.length; i++) {
          option = document.createElement('option');
          option.text = jsonArray[i]["Mode"];
          select.add(option);
        }
    }

或者，您也可以在HTML 本身的Script 标记下拥有上述相同的功能。在这种情况下，到目前为止，您的 HTML 看起来像 -

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

现在您可以选择何时调用此函数。当表单被加载或其他任何你想要调用它的时候。假设您想在加载表单时调用它，请继续并将以下内容放入您的 HTML -

<body onload="addOptions();">
    <select id="dd"></select>
</body>

所以，你的整体和最终HTML 看起来像 -

<html>
<script type="text/javascript" src="data.json"></script>
<script>
    function addOptions(){
        var jsonArray = JSON.parse(data);
        var select = document.getElementById('DropdownList');
        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>

或者，如果您的服务器资源返回以下内容： /myjson 那么你也可以使用AJAX 来克服同样的问题 -

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

]

然后使用JavaScript 创建元素。

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

});

此解决方案主要适用于现代浏览器，除非您运行的是Internet Explorer。如果您正在运行Internet Explorer，请关注此线程 - How to display JSON objects as options of a dropdown in HTML, using a common JavaScript funciton for all objects

jsfiddle 也将帮助您更好地理解 :)
希望这会有所帮助。

【讨论】：