javascript - 使用 jQuery、JSON 和 AJAX 填充下拉列表

Question

就像标题所说，我正在尝试使用 jQuery、JSON 和 AJAX 创建一个下拉菜单，尽管我熟悉理论但尚未将其付诸实践，任何建议、演示代码片段或教程都将是非常感谢，因为我希望有一个尽可能好的开始!

提前致谢!

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>");
   });    
 });
});

当然上面的例子依赖于具有以下格式的json。

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

编辑: 您还需要熟悉选择框更改事件 http://api.jquery.com/change/和:选定的选择器，将允许您从选择框中获取选定的选项 http://api.jquery.com/selected-selector/就像$(“选择选项:已选择”)