jquery基于layui如何实现二级联动下拉选择菜单-创新互联
这篇文章将为大家详细讲解有关jquery基于layui如何实现二级联动下拉选择菜单,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
站在用户的角度思考问题,与客户深入沟通,找到古雷港网站设计与古雷港网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都做网站、成都网站建设、企业官网、英文网站、手机端网站、网站推广、空间域名、网页空间、企业邮箱。业务覆盖古雷港地区。先看一下简单的效果
直接上代码
html部分 (下拉框中value的数值我是根据数据库中取出来)
js操作部分
form.on('select(province)', function(data){ $.getJSON("/api/getCity?pid="+data.value, function(data){ var optionstring = ""; $.each(data.data, function(i,item){ optionstring += ""; }); $("#city").html('' + optionstring); form.render('select'); //这个很重要 }); });
后台返回的数据格式json
{ "status": 200, "message": "result", "data": [ { "code": "3418", "name": "宣城市", "province": "34" }, { "code": "3417", "name": "池州市", "province": "34" }, { "code": "3416", "name": "亳州市", "province": "34" }, { "code": "3415", "name": "六安市", "province": "34" }, { "code": "3413", "name": "宿州市", "province": "34" }, { "code": "3412", "name": "阜阳市", "province": "34" }, { "code": "3411", "name": "滁州市", "province": "34" }, { "code": "3408", "name": "安庆市", "province": "34" }, { "code": "3407", "name": "铜陵市", "province": "34" }, { "code": "3406", "name": "淮北市", "province": "34" }, { "code": "3405", "name": "马鞍山市", "province": "34" }, { "code": "3404", "name": "淮南市", "province": "34" }, { "code": "3403", "name": "蚌埠市", "province": "34" }, { "code": "3402", "name": "芜湖市", "province": "34" }, { "code": "3401", "name": "合肥市", "province": "34" } ] }
关于“jquery基于layui如何实现二级联动下拉选择菜单”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
新闻标题:jquery基于layui如何实现二级联动下拉选择菜单-创新互联
分享链接:http://scyanting.com/article/dppoic.html