Использование jQuery, JSON и AJAX для заполнения раскрывающегося списка

Question

Как гласит заголовок, я пытаюсь создать раскрывающееся меню с использованием jQuery, JSON и AJAX, хотя я знаком с теорией, которую мне еще предстоит применить на практике, любые советы, фрагменты демо-кода или учебные пособия будутценим, так как я хотел бы начать как можно лучше!

Спасибо заранее!

Answer 1

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

$.getJSON("test.php", function(data){
  $.each(data, function(index, text) {
    $('#mySelect').append(
        $('<option></option>').val(index).html(text)
    );
  });
});

примечание: test.php должен возвращать кодированный в json массив

Answer 2

Вам нужно сделать вызов $ .getJSON, чтобы получить json с сервера на document.load или в другое событие http://api.jquery.com/jQuery.getJSON/.После этого вы должны просмотреть данные и добавить их в поле выбора.Обратите внимание, что приведенный выше пример http://www.jsfiddle.net/Dyc9Y/1/

<select id="fillME"></select>
<button id="startFilling" value="">Start ajax</button>
$(function(){
 var json = {
                 "0":  {"title":"localjsonOPtion1", "value":"b"},
                 "1":  {"title":"localjsonOPtion2", "value":"a"}
            };

  $("#startFilling").click(function(){

    $.getJSON("http://localdev.myvouchercodes.co.uk/local/default/search/jsonresponse", function(data){
         $("#fillME").html("");
        for(key in data)
            $("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
        for(key in json)
            $("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
   });    
 });
});

зависит от json со следующим форматом.

{ 
   "0":  {"title":"option1", "value":"1"},
   "1":  {"title":"option2", "value":"2"}
}

РЕДАКТИРОВАНИЕ: Вам также необходимо знать о поле выборасобытие изменения http://api.jquery.com/change/ и : выбранный селектор , который позволит вам выбрать выбранную опцию из окна выбора http://api.jquery.com/selected-selector/ подобно $("select option:selected")