jquery基于layui实现二级联动下拉选择

下拉选择功能我们很常见，本文主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择)，具有一定的实用价值，需要的朋友可以参考下，希望能帮助到大家。

先看一下简单的效果

直接上代码

html部分 (下拉框中value的数值我是根据数据库中取出来)

 城市
 

  
   
   北京市
   天津市
   河北省
   山西省
   内蒙古自治区
   辽宁省
   吉林省
   黑龙江省
   上海市
   江苏省
   浙江省
   安徽省
   福建省
   江西省
   山东省
   河南省
   湖北省
   湖南省
   广东省
   广西壮族自治区
   海南省
   重庆市
   四川省
   贵州省
   云南省
   西藏自治区
   陕西省
   甘肃省
   青海省
   宁夏回族自治区
   新疆维吾尔自治区
   台湾省
   香港特别行政区
   澳门特别行政区
  
 
 

  
   
  
 

js操作部分

DreamGen

一个AI驱动的角色扮演和故事写作的平台

下载

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"
  }
 ]
}

相关推荐：

AngularJS实现的省市二级联动功能示例

jquery的ajax实现二级联动效果实现方法

实现注册页面jq二级联动