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 += "" + item.name + "";
});
$("#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://cdweb.net/article/dppoic.html
