2015-09-17 2 views

ответ

3

Так идти вперед с некоторыми фиктивными данными, вот то, что вы можете делать это - иметь 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 также поможет вам лучше понять :)
Надеюсь, что это помогает.

+1

Сделайте голосование и принимайте его как ответ, чтобы он был доступен другим пользователям, если он помогает! :)) – TheLuminor

 Смежные вопросы

  • Нет связанных вопросов^_^