Question

我的下拉列表ID是'DropdownList'

我的json字符串采用以下形式：

[{"Domain":"domain"}]

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

Answer 1

所以继续使用一些虚拟数据，这里你可以做的是 - 在一个名为JSON的文件中有一个data.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也会帮助你更好地理解:)
希望这会有所帮助。

将JSON字符串绑定到下拉列表

1 个答案: