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 相关文章推荐
按钮JS复制文本框和表格的代码
Apr 01 Javascript
浅谈JavaScript函数参数的可修改性问题
Dec 05 Javascript
javascript实例分享---具有立体效果的图片特效
Jun 08 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
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
php读取qqwry.dat ip地址定位文件的类实例代码
2016/11/15 PHP
推荐dojo学习笔记
2007/03/24 Javascript
Javascript学习笔记5 类和对象
2010/01/11 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
Javascript拓展String方法小结
2013/07/08 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
jQuery浏览器CSS3特写兼容实例
2015/01/19 Javascript
js动态修改表格行colspan列跨度的方法
2015/03/30 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
基于Bootstrap的网页设计实例
2017/03/01 Javascript
jQuery实现多张图片上传预览(不经过后端处理)
2017/04/29 jQuery
在JS中如何把毫秒转换成规定的日期时间格式实例
2017/05/11 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
python分割文件的常用方法
2014/11/01 Python
Python进程间通信用法实例
2015/06/04 Python
python xml解析实例详解
2016/11/14 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
Python实现非正太分布的异常值检测方式
2019/12/09 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
承认错误的检讨书
2014/01/30 职场文书
教师节活动主持词
2014/04/02 职场文书
人事专员岗位说明书
2014/07/29 职场文书
政风行风评议心得体会
2014/10/21 职场文书
企业法人代表证明书
2015/06/18 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS