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


Posted in jQuery onJune 20, 2017

先看一下简单的效果

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

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

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

直接上代码

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

<div class="layui-form-item">
 <label class="layui-form-label">城市</label>
 <div class="layui-input-inline">
  <select name="city" lay-filter="province">
   <option value=""></option>
   <option value="11">北京市</option>
   <option value="12">天津市</option>
   <option value="13">河北省</option>
   <option value="14">山西省</option>
   <option value="15">内蒙古自治区</option>
   <option value="21">辽宁省</option>
   <option value="22">吉林省</option>
   <option value="23">黑龙江省</option>
   <option value="31">上海市</option>
   <option value="32">江苏省</option>
   <option value="33">浙江省</option>
   <option value="34">安徽省</option>
   <option value="35">福建省</option>
   <option value="36">江西省</option>
   <option value="37">山东省</option>
   <option value="41">河南省</option>
   <option value="42">湖北省</option>
   <option value="43">湖南省</option>
   <option value="44">广东省</option>
   <option value="45">广西壮族自治区</option>
   <option value="46">海南省</option>
   <option value="50">重庆市</option>
   <option value="51">四川省</option>
   <option value="52">贵州省</option>
   <option value="53">云南省</option>
   <option value="54">西藏自治区</option>
   <option value="61">陕西省</option>
   <option value="62">甘肃省</option>
   <option value="63">青海省</option>
   <option value="64">宁夏回族自治区</option>
   <option value="65">新疆维吾尔自治区</option>
   <option value="71">台湾省</option>
   <option value="81">香港特别行政区</option>
   <option value="82">澳门特别行政区</option>
  </select>
 </div>
 <div class="layui-input-inline">
  <select name="city" id="city">
   <option value=""></option>
  </select>
 </div>
</div>

js操作部分

form.on('select(province)', function(data){
   $.getJSON("/api/getCity?pid="+data.value, function(data){
    var optionstring = "";
    $.each(data.data, function(i,item){
     optionstring += "<option value=\"" + item.code + "\" >" + item.name + "</option>";
    });
    $("#city").html('<option value=""></option>' + 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 相关文章推荐
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
jQuery遮罩层实例讲解
May 11 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jQuery简介_动力节点Java学院整理
Jul 04 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
jQuery实现的老虎机跑动效果示例
Dec 29 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jquery加载单文件vue组件的方法
Jun 20 #jQuery
jQuery 实现双击编辑表格功能
Jun 19 #jQuery
jQuery实现简单的手风琴效果
Apr 17 #jQuery
jQuery自定义多选下拉框效果
Jun 19 #jQuery
jQuery实现下拉菜单的实例代码
Jun 19 #jQuery
jquery DataTable实现前后台动态分页
Jun 17 #jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 #jQuery
You might like
解析php防止form重复提交的方法
2013/07/01 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
Mootools 1.2教程 排序类和方法简介
2009/09/15 Javascript
javascript 函数速查表
2010/02/07 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JQuery弹出层示例可自定义
2014/05/19 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
2016/05/20 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
python3中的md5加密实例
2018/05/29 Python
python实现自动登录
2018/09/17 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
python3.7 openpyxl 删除指定一列或者一行的代码
2019/10/08 Python
Django 实现将图片转为Base64,然后使用json传输
2020/03/27 Python
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
地理科学专业毕业生求职信
2013/10/15 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
外贸专业求职信
2014/03/09 职场文书
实习会计求职自荐信范文
2014/03/10 职场文书
安全责任书范文
2014/08/25 职场文书
个人授权委托书范本
2014/09/14 职场文书
超市仓管员岗位职责范本
2014/09/18 职场文书
2015年校本培训工作总结
2015/07/24 职场文书
Java后台生成图片的完整步骤
2021/08/04 Java/Android