Как создать опцию выбора HTML из хэша JSON? - PullRequest
Новая
       2

Как создать опцию выбора HTML из хэша JSON?

4 голосов
/ 31 января 2012

У меня есть простой код JSON: 

[{'1':'Name'}, {'2', 'Age'}, {'3','Gender'}]

У меня есть тег select в моем HTML: 

<select name="datas" id="datas"></select>

Мне нужен простой способ создать поле выбора HTML из этого JSON, например: 

<select name="datas" id="datas">
    <option value="1">Name</option>
    <option value="2">Age</option>
    <option value="3">Gender</option>
</select>

Ответы [ 3 ]

7 голосов
/ 31 января 2012

Просто для пинка вот ответ в чистом javascript, также вам, вероятно, не нужен массив для этого, достаточно простого объекта 

    <select name="datas" id="datas"></select>
    <script>

        html = "";
        obj = {
            "1" : "Name",
            "2": "Age",
            "3" : "Gender"
        }
        for(var key in obj) {
            html += "<option value=" + key  + ">" +obj[key] + "</option>"
        }
        document.getElementById("datas").innerHTML = html;

    </script>
7 голосов
/ 31 января 2012

Попробуйте это. 

//Correct(missing colons) in the array items
var data = [{'1':'Name'}, {'2': 'Age'}, {'3': 'Gender'}];

Создайте option элемент и затем используйте метод append, чтобы добавить их в элемент select. 

var $select = $('#datas');
$.each(data, function(i, val){
    $select.append($('<option />', { value: (i+1), text: val[i+1] }));
});

Демо

1 голос
/ 12 июня 2014

Ответ выше предполагает, что индексы данных массива находятся в порядке. Что если переменная данных будет: 

var data = [ {'23':'Age'}, {'12':'Gender'}, {'3':'Name'}];

Так в алфавитном порядке, но со случайными идентификаторами.

Я нашел один способ решения этой проблемы: 

$.each(data, function(key, value) {
  var i = Object.keys(value)[0];
  $("select#datas").append( $("<option />").val(i).text(value[i]) );
...