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自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jquery请求servlet实现ajax异步请求的示例
Jun 03 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php中base64_decode与base64_encode加密解密函数实例
2014/11/24 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
Node.js DES加密的简单实现
2016/07/07 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
node基于puppeteer模拟登录抓取页面的实现
2018/05/09 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
Django-imagekit的使用详解
2020/07/06 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
限量版运动鞋和街头服饰:TheDrop
2020/09/06 全球购物
执行总经理岗位职责
2014/02/03 职场文书
员工薪酬激励方案
2014/06/13 职场文书
我的中国梦演讲稿高中篇
2014/08/19 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
销售助理岗位职责
2015/02/11 职场文书
Java中try catch处理异常示例
2021/12/06 Java/Android
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js