微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

javascript – 使用jQuery,JSON和AJAX填充下拉列表

就像标题所说,我正在尝试使用jQuery,JSON和AJAX创建一个下拉菜单,虽然我熟悉我尚未将其付诸实践的理论,任何建议,演示代码片段或教程都将受到赞赏,因为我想开始最好的开始!

Thanx提前!

解决方法:

您需要执行$.getJSON调用来从document.load或其他事件http://api.jquery.com/jQuery.getJSON/上的服务器获取json.之后,您必须遍历数据并将其附加到您的选择框.看到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/喜欢$(“选择选项:已选中”)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐