使用jQuery，JSON和AJAX來填充下拉菜單

Question

就像標題所示，我正嘗試使用jQuery，JSON和AJAX創建一個下拉菜單，儘管我熟悉我尚未實施的理論，任何建議，演示代碼片段或教程將不勝感激，因爲我想盡可能開始！

Thanx提前！

Answer 1

你需要做的$ .getJSON調用上document.load從服務器獲取JSON或在其他事件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>"); 
    });  
}); 
}); 

上面的offcourse例子取決於具有以下格式的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")

Answer 2

這應該做的伎倆：

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

注：test.php的應該返回一個JSON編碼陣列