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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现IE输入框完成placeholder标签功能的方法
Sep 20 jQuery
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jquery 验证用户名是否重复代码实例
May 14 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jQuery实现雪花飘落效果
Aug 02 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
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
PHP获取数组的键与值方法小结
2015/06/13 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
jQuery中:nth-child选择器用法实例
2014/12/31 Javascript
JavaScript实现梯形乘法表的方法
2015/04/25 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue2.0 循环遍历加载不同图片的方法
2018/03/06 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
extjs4图表绘制之折线图实现方法分析
2020/03/06 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
在vue中嵌入外部网站的实现
2020/11/13 Javascript
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
请解释在new与override的区别
2012/10/29 面试题
英语专业毕业生自荐信范文
2013/12/31 职场文书
工作自我评价怎么写
2014/01/29 职场文书
中班教师个人总结
2015/02/05 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
详解thinkphp的Auth类认证
2021/05/28 PHP
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle