【笔记】Select2 三级联动

- 效果图

- 插件

- jsp页面

<link rel="stylesheet" type="text/css" href="static/plugins/Select2-v4.0.5/css/select2.min.css">
<style type="text/css">
.js-example-basic-single{min-width: 180px;
}
.select2-container .select2-selection--single{height:34px;border: 1px solid #ccc; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;color: #555;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:34px;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:32px;}
</style><script type="text/javascript" src="static/plugins/jquery/jquery-1.12.4.js"></script>
<script type="text/javascript" src="static/plugins/Select2-v4.0.5/js/select2.min.js"></script>
<script type="text/javascript" src="static/plugins/Select2-v4.0.5/js/zh-CN.js"></script><script type="text/javascript">
$(function(){/* 三级联动 *//* 省数据 */var provinceData=${provinceData};var $eventSelect2= $(".select2");$(".select2-province").select2({placeholder:"请选择省份",language: "zh-CN",data: provinceData});$(".select2-city").select2({placeholder:"请选择市",language: "zh-CN",disabled: true});$(".select2-district").select2({placeholder:"请选择区、县",language: "zh-CN",disabled: true});$eventSelect2.on("select2:select", function (e) { var data = e.params.data;var id = data.id;if(id.slice(2)=="0000"){$(".select2-city").prop("disabled", false);/* 重置 */$(".select2-city").val(null).trigger('change');$(".select2-district").val(null).trigger('change');$(".select2-district").prop("disabled", true);getRegionList(2,id,".select2-city","请选择市");}else if(id.slice(4)=="00"){$(".select2-district").prop("disabled", false);/* 重置 */$(".select2-district").val(null).trigger('change');getRegionList(3,id,".select2-district","请选择区、县");}console.log(data);});/* 根据所选，获取下一级的列表（市数据、区县数据） */function getRegionList(level,parentId,clazz,tips){$.ajax({url : '/region/list',type : "get",data : {"level":level,"parentId":parentId},dataType: 'json',success : function(data) {/* 解决追加问题 */$(clazz).html('<option selected="selected"></option>');/* 生成新数据 */$(clazz).select2({placeholder: tips,language: "zh-CN",data:data});}});}
});
</script>
---------------------------HTML---华丽的分割线-------------------------------
<div class="form-group"><label class="col-md-2 control-label">机构地址：</label><div class="col-md-6"><select class="select2 select2-province  form-control" name="province" style="width: 32.8%"><option selected="selected"></option><c:forEach items="${provinceList }" var="item"><option value="${item.province }" <c:if test="${item.province eq blcOrgan.province }">selected="selected"</c:if>>${item.province }</option></c:forEach></select><select class="select2 select2-city form-control" name="city" style="width: 32.8%"><option selected="selected"></option></select><select class="select2-district form-control" name="district" style="width: 32.8%"><option selected="selected"></option></select></div>
</div>

- controller层

    @GetMapping("/edit")public String toEdit(Model model) {List<Select2Results> regionList = RegionSrv.queryRegionList("1", null);String provinceData = JsonUtils.toFastJson(regionList);model.addAttribute("provinceData", provinceData);return  "blc_organ_edit";}

ajax获取下级列表的controller

    @GetMapping("/list")@ResponseBodypublic List<Select2Results> list(String level, String parentId) {return RegionSrv.queryRegionList(level, parentId);}

- mapper.xml

<select id="selectRegionList" resultType="com.snsoft.common.util.Select2Results">SELECT ID,NAME TEXT FROM <if test="level == 1">REGION_PROVINCE</if><if test="level == 2">REGION_CITY WHERE PROVINCE_ID =#{parentId}</if><if test="level == 3">REGION_DISTRICT WHERE CITY_ID =#{parentId}</if></select>

- select2数据封装实体

/** * select2 数据封装工具类* * @Author : liuzy* @Date : 2018/07/25 08:40*/
public class Select2Results implements Serializable {private static final long serialVersionUID = -686788093782502884L;private String id;private String text;private Boolean selected;private Boolean disabled;public String getId() {return id;}public void setId(String id) {this.id = id;}public String getText() {return text;}public void setText(String text) {this.text = text;}public Boolean getSelected() {return selected;}public void setSelected(Boolean selected) {this.selected = selected;}public Boolean getDisabled() {return disabled;}public void setDisabled(Boolean disabled) {this.disabled = disabled;}/** * 输出json串* @Author : liuzy* @Date : 2018/07/25 08:43*/@Overridepublic String toString() {return JSON.toJSONString(this);}}

* SQL

(据说：行政区划代码更新了2018-6-30，我用的旧的，所以就不上传sql文件了）

插件下载：https://download.csdn.net/download/jul_11th/10564546

谢谢支持！

【笔记】Select2 三级联动相关推荐

uni-app三级联动笔记
uniapp官方组件picker uniapp使用三级联动picker,官方文档省市区选择器不适用5+app.h5和支付宝小程序,必须适用插件(日期.时间.三级联动picker)(mpvue-pick ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
黑马ajax学习笔记02--art-template模板，自动提示，防抖，三级联动，fromData传参及传文件，同源，jsonp，天气预报，CROS，服务器桥接，withCredential跨域登录
1.模板引擎概述作用:使用模板引擎提供的模板语法,可以将数据和HTML拼接起来实际上是实现在客户端做数据拼接 art-template模板引擎官网:http://aui.github.io/ar ...
【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...
php创建无限级树型菜单以及三级联动菜单
http://www.php.cn/php-weizijiaocheng-373500.html 这篇文章主要介绍了php创建无限级树型菜单 ,主要使用的是递归函数,感兴趣的小伙伴们可以参考一下写递 ...
后端实体类接收数组_三级联动返回数组的方式
上一章发现编辑会出现所属分类不显示的现象~ 在这里从主页面查到修改的按钮,发现调用子页面init()方法,加上查询完整的路径信息: 前台需要返回一个catelogPathd的数组,这时候需要在后台的实 ...
php jq ajax 4个下拉框联动案列,AJAX_AJAX实现下拉框联动，想当年，为了实现三级联动， - phpStudy...
AJAX实现下拉框联动想当年,为了实现三级联动,找个js高手些了N多代码才搞定,但是很慢,因为一次要将所有的选项取来,然后排序,查找动态显示. 现在使用AJAX真是太方便了,下面做了个简单例子,实现 ...
实验有效的js原生前端全国三级联动
这是我的目录平级注意要在一个级别记录的笔记,当初记录在word文档侵权就删哈第二个亲测有用的三级联动 intextHtml.html <!doctype html> <h ...
jquery-select2实现省市区三级联动（拓展SpringMVC后台方法）
本次文章介绍的三级联动功能,可以直接使用普通的select,添加到select2插件是为了更好的展示效果.好了,废话不多,直接上代码首先,我们定义个location.js,里边存储省市级联的数据,以 ...

【笔记】Select2 三级联动

- 效果图

- 插件

- jsp页面

- controller层

- mapper.xml

- select2数据封装实体

* SQL

插件下载：https://download.csdn.net/download/jul_11th/10564546

谢谢支持！

【笔记】Select2 三级联动相关推荐

最新文章

热门文章