chosen实现省市区三级联动


Posted in Javascript onAugust 16, 2018

本文实例为大家分享了chosen实现省市区三级联动的具体代码,供大家参考,具体内容如下

效果图:

chosen实现省市区三级联动

一、资源

1.1、css资源

<link href="../../css/plugins/chosen/chosen.css" rel="stylesheet">

1.2、js资源

<script src="../../js/plugins/chosen/chosen.jquery.js"></script>

二、代码

<div class="row">
  <div class="form-group col-sm-2">
  <div class="input-group">
   <select data-placeholder="选择省份..." id="province" class="province-chosen-select" tabindex="1">
   <option value="">请选择省份</option>
   <#if provinceList?? && provinceList?size gt 0>
   <#list provinceList as province>
   <option value="${province.provinceId!}" >${province.name!}</option>
  </#list>
  </#if>
  </select>
  </div>
  </div>
  <div class="form-group col-sm-2" style="margin-left: 36px;">
  <div class="input-group">
  <select data-placeholder="选择城市..." id="city" class="city-chosen-select" tabindex="2">
  <option value="">请选择城市</option>
   </select>
  </div>
 </div>
 <div class="form-group col-sm-2" style="margin-left: 36px;">
  <div class="input-group">
   <select data-placeholder="选择区县..." class="area-chosen-select" id="area" tabindex="3">
   <option value="">请选择区县</option>
  </select>
  </div>
 </div>
</div>

三、javascript代码

<script type="text/javascript">
 $(function(){
  $('.province-chosen-select').chosen({
   disable_search_threshold: 10,
   no_results_text: '没有找到',//没有搜索到匹配项时显示的文字
   width: '240px',
   disable_search:false, // 设置为 true 隐藏单选框的搜索框
   disable_search_threshold:0 //少于 n 项时隐藏搜索框
  });
  $('.city-chosen-select').chosen({
   disable_search_threshold: 10,
   no_results_text: '没有找到',//没有搜索到匹配项时显示的文字
   width: '240px',
   disable_search:false, // 设置为 true 隐藏单选框的搜索框
   disable_search_threshold:0 //少于 n 项时隐藏搜索框
  });
  $('.area-chosen-select').chosen({
   disable_search_threshold: 10,
   no_results_text: '没有找到',//没有搜索到匹配项时显示的文字
   width: '240px',
   disable_search:false, // 设置为 true 隐藏单选框的搜索框
   disable_search_threshold:0 //少于 n 项时隐藏搜索框
  });
  
 })
 //Chosen 触发标准的 change 事件,同时会传递 selected or deselected 参数, 方便用户获取改变的选项
 $('.province-chosen-select').on('change', function(e, params) {
  findCitiesByProvince(e, params);
  });
 $('.city-chosen-select').on('change', function(e, params) {
  findAreasByCity(e, params);
  });
 
 function findCitiesByProvince(e, params) {
  var provinceId = params.selected;
  $.post("/common/find_cities_by_province", {
  "provinceId":provinceId
  }, function(data){
   $('#city option:first').nextAll().remove();
   $('#area option:first').nextAll().remove();
   var html = '';
   for (var i = 0; i < data.length; i++) {
   html+='<option value="'+data[i].cityId+'" hassubinfo="true">'+data[i].name+'</option>'
   }
   $("#city").append(html);
   //通过 JS 改变 select 元素选项时应该触发此事件,以更新 Chosen 生成的选框
   $('.city-chosen-select').trigger('chosen:updated');
   $('.area-chosen-select').trigger('chosen:updated');
  })
 }
 function findAreasByCity(e, params) {
  var cityId = params.selected;
  $.post("/common/find_areas_by_city", {
  "cityId":cityId
  }, function(data){
   $('#area option:first').nextAll().remove();
   var html = '';
   for (var i = 0; i < data.length; i++) {
   html+='<option value="'+data[i].areaId+'" hassubinfo="true">'+data[i].name+'</option>'
   }
   $("#area").append(html);
   //通过 JS 改变 select 元素选项时应该触发此事件,以更新 Chosen 生成的选框
   $('.area-chosen-select').trigger('chosen:updated');
  })
 }
 function submitBtn() {
  $("#result_div").html('');
  var provinceId = $("#province").val();
  var provinceName = $("#province option:selected").text();
  var cityId = $("#city").val();
  var cityName = $("#city option:selected").text();
  var areaId = $("#area").val();
  var areaName = $("#area option:selected").text();
  $("#result_div").append("provinceId="+provinceId+"<br>")
  .append("provinceName="+provinceName+"<br>")
  .append("cityId="+cityId+"<br>")
  .append("cityName="+cityName+"<br>")
  .append("areaId="+areaId+"<br>")
  .append("areaName="+areaName+"<br>");
 }
 </script>

四、java代码

/**
 *
 * @Title: findCitiesByProvince
 * @Description: 根据省份获取城市列表
 * @author: 大都督
 * @param provinceId
 * @return
 * @return: MessageInfo
 */
 @RequestMapping("/find_cities_by_province")
 @ResponseBody
 public List<City> findCitiesByProvince(String provinceId) {
  Assert.hasText(provinceId, StringText.provinceId_must);
  return cityDao.findByProvinceId(provinceId);
 }
 /**
 *
 * @Title: findAreasByCity
 * @Description: 根据城市获取区县列表
 * @author: 大都督
 * @param cityId
 * @return
 * @return: List<City>
 */
 @RequestMapping("/find_areas_by_city")
 @ResponseBody
 public List<Area> findAreasByCity(String cityId) {
  Assert.hasText(cityId, StringText.cityId_must);
  return areaDao.findByCity(cityId);
 }

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
用JavaScript实现使用鼠标画线的示例代码
Aug 19 Javascript
整理Javascript函数学习笔记
Dec 01 Javascript
js 连续赋值的简单实现
Jun 13 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
js+html获取系统当前时间
Nov 10 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
微信小程序和百度的语音识别接口详解
May 06 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
Dec 12 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
vue elementUI批量上传文件
Apr 26 Vue.js
webuploader实现上传图片到服务器功能
Aug 16 #Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 #Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 #Javascript
深入理解Vue 组件之间传值
Aug 16 #Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 #Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 #Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
You might like
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
Node.js开发指南中的简单实例(mysql版)
2013/09/17 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
js实现简单的验证码
2015/12/25 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
javascript中UMD规范的代码推演
2018/08/29 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
python计算最大优先级队列实例
2013/12/18 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
Python range、enumerate和zip函数用法详解
2019/09/11 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
Python中格式化字符串的四种实现
2020/05/26 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
2020/10/19 HTML / CSS
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
介绍一下write命令
2012/09/24 面试题
大学生毕业自我评价范文分享
2013/11/11 职场文书
高中政治教学反思
2014/01/18 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
2014年发展党员工作总结
2014/11/12 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
JavaScript原型链详解
2021/11/07 Javascript