0

我的下拉列表 ID 是“DropdownList”

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

[{"Domain":"domain"}]

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

4

1 回答 1

3

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

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

将src标签添加到您的HTML，以便它知道在哪里可以找到JSONfrom ：

<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，请关注此线程 - 如何将 JSON 对象显示为 HTML 中的下拉选项，对所有对象使用通用 JavaScript 函数

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

于 2015-09-17T10:08:35.247 回答