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 call 函数的用法说明
Apr 09 Javascript
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
微信小程序搜索功能(附:小程序前端+PHP后端)
Feb 28 Javascript
微信小程序登陆注册功能的实现代码
Dec 10 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 编程的 5个良好习惯
2009/02/20 PHP
什么情况下可以不写PHP的闭合标签“?&gt;”
2014/08/28 PHP
ThinkPHP、ZF2、Yaf、Laravel框架路由大比拼
2015/03/25 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
浅谈PHP中new self()和new static()的区别
2017/08/11 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
vue实现动态按钮功能
2019/05/13 Javascript
python模拟事件触发机制详解
2018/01/19 Python
高效使用Python字典的清单
2018/04/04 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
python变量的存储原理详解
2019/07/10 Python
Python基于staticmethod装饰器标示静态方法
2020/10/17 Python
浅析python实现动态规划背包问题
2020/12/31 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
优瑞自动咖啡机官网:Jura
2018/09/29 全球购物
this关键字的作用
2016/01/30 面试题
合同意向书范本
2014/07/30 职场文书
村班子对照检查材料
2014/08/18 职场文书
绿色校园广播稿
2014/10/13 职场文书
销售员工作检讨书(推荐篇)
2014/10/18 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
python中的被动信息搜集
2021/04/29 Python
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
详解Java实践之建造者模式
2021/06/18 Java/Android
Python获取字典中某个key的value
2022/04/13 Python