jquery基于layui实现二级联动下拉选择(省份城市选择)

2022-01-13,,,,

本篇文章主要介绍了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实现二级联动下拉选择(省份城市选择)的详细内容,更多请关注本站其它相关文章!

《jquery基于layui实现二级联动下拉选择(省份城市选择).doc》

下载本文的Word格式文档,以方便收藏与打印。