JavaScript Массив объектов в раскрывающемся списке

Question

У меня есть массив объектов, которые были извлечены из файла JSON (JSONP) с использованием jQuery.

Мне необходимо отобразить эти данные с помощью раскрывающегося списка HTML.

Текущий код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript'>
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){

    console.log(data);


    })
</script>

Как поместить эту переменную data, представляющую собой массив объектов, отображаемых с использованием раскрывающегося списка HTML?

массив объектов выглядит следующим образом

Object
 lines: Array[10]
0: Object
   line: "COLOMBO - BADULLA"
 1: Object
 2: Object
 3: Object
 4: Object
 5: Object
 6: Object
 7: Object

Файл JSON

( {"lines":[{"line":"COLOMBO - BADULLA"},{"line":"COLOMBO - MATALE"},{"line":"COLOMBO - PUTTLAM"},{"line":"COLOMBO - THANDIKULAM"},{"line":"COLOMBO - TALAIMANNAR"},{"line":"COLOMBO - BATTICALOA"},{"line":"COLOMBO - TRINCOMALEE"},{"line":"COLOMBO - MATARA"},{"line":"COLOMBO - AVISSAWELLA"},{"line":"COLOMBO - MIHINTALE"}]} );

Answer 1

Это должно работать:

$(document).ready(function() {
    var oDDL = $("<select>");
    $.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data) {
        $.each(data.lines, function(i, item) {
            oDDL.append('<option>' + item.line + '</option>');
        });
    });
    $("body").append(oDDL);
});

Как видите, он строит объект выпадающего списка и добавляет к нему options для каждого элемента в массиве JSON.

Примечание: Каждый ответ JSON отличается, data.lines и item.line соответствуют формату JSON только в этом конкретном случае.

Answer 2

Сначала вам нужно создать элемент в html, если у вас его нет:

<select id='myselect'></select>

Затем в js, если у вас есть свойства .value y .caption завещь, которую вы сделаете:

$.getJSON('remote-json-proxy.php?lang=en&callback=?', function(data){
    for(var i=0; i<data.length; i++){ //Traverse the data array
       var value = data[i].value;
       var text = data[i].caption;
       $('<option/>').val(value).text(text).appendTo('#myselect');
    };
});

Только это.Надеюсь это поможет.Приветствия