0

ドロップダウン リストの ID は「DropdownList」です

私のjson文字列は次の形式です：

[{"Domain":"domain"}]

JsonString をドロップダウンリストにバインドするにはどうすればよいですか?

4

1 に答える 1

3

したがって、いくつかのダミーデータを使用して先に進むと、ここでできることは次のとおりですJSON。data.json

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

srcタグをあなたに追加して、 fromHTMLを見つける場所がわかるようにします。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、このスレッドに従ってください - すべてのオブジェクトに共通の JavaScript 関数を使用して、JSON オブジェクトを HTML のドロップダウンのオプションとして表示する方法

jsfiddle も理解を深めるのに役立ちます:)
これが役に立てば幸いです。

于 2015-09-17T10:08:35.247 に答える