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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jQuery回调方法使用示例
Jun 26 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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遍历文件夹与文件类及处理类用法实例
2014/09/23 PHP
php使用正则验证中文
2016/04/06 PHP
解决Laravel 使用insert插入数据,字段created_at为0000的问题
2019/10/11 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
ExtJS 设置级联菜单的默认值
2010/06/13 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
原生js实现可拖拽效果
2017/02/28 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python中partial()基础用法说明
2018/12/30 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
对Python3之方法的覆盖与super函数详解
2019/06/26 Python
基于Pytorch SSD模型分析
2020/02/18 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
酒店管理毕业生自荐信
2014/05/25 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
工作收入证明模板
2015/06/12 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
golang 实用库gotable的具体使用
2021/07/01 Golang