Select2 三级联动

朱雀 2020-10-24 17:26 744阅读 0赞

## \- 效果图 ##

![这里写图片描述][70]

## \- 插件 ##

![这里写图片描述][70 1]

## \- 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")
        @ResponseBody
        public 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 */
        @Override
        public String toString() {
            return JSON.toJSONString(this);
        }
    
    
    }

## \* SQL ##

![这里写图片描述][70 2]  
(据说：行政区划代码更新了2018-6-30，我用的旧的，所以就不上传sql文件了）

[70]: /images/1603560278901.png
[70 1]: /images/1603560306305.png
[70 2]: /images/1603560338470.png

发表评论取消回复

表情：

评论列表（有 0 条评论，744人围观）

还没有评论，来说两句吧...

相关阅读

相关三级联动

.set设置：ctrl+alt+s; 2.文本框在设置border-box之前边框向内设置 3.行内标签不能设置上下的margin（span） 4.json为...

桃扇骨/ 2024年04月17日 14:42/ 0 赞/ 13 阅读

相关原生js写简单三级联动以及复杂三级联动

1. 简单三级联动效果图： ![在这里插入图片描述][20190823133145896.gif] > 思想：当选择省时，创建对应的市子对象，并将其加入父元...

系统管理员/ 2024年04月17日 05:40/ 0 赞/ 8 阅读

相关 JS Select 省市三级联动

省： <select style="width: 100px;" id="pre" onchange="chg(this);"> <option

ゝ一纸荒年。/ 2023年01月13日 05:53/ 0 赞/ 95 阅读

相关三级联动

插件: <script type="text/ecmascript" src="areadata.js"></script> <script type="text/ecm

布满荆棘的人生/ 2022年09月25日 15:25/ 0 赞/ 191 阅读

相关城市三级联动

数据演示(DEMO)地址：[http://jquerywidget.com/jquery-citys/][http_jquerywidget.com_jquery-city

女爷i/ 2022年06月13日 02:44/ 0 赞/ 227 阅读

相关 js使用select实现三级联动

一、先练习一下select option标签的使用 <!DOCTYPE html> <html> <head>

Love The Way You Lie/ 2022年05月29日 04:55/ 0 赞/ 140 阅读

相关 jquery实现select三级联动（简单易懂）

尽可能每一步都做到详细，算是一个知识的回顾，有不足之处，希望大家多提意见该例子实现的是省市县三级联动。实现原理：省

妖狐艹你老母/ 2022年05月28日 03:24/ 0 赞/ 172 阅读

相关 WebForm 三级联动

三级联动数据库根据父级代号条件写查询返回list<>集合方法一：创建三个下拉列表： ※AutoPostBack：否发生自动回传到服务器的操作。如果把该属性设置为

Love The Way You Lie/ 2022年01月07日 00:15/ 0 赞/ 330 阅读

相关 AJXA三级联动

1 html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

向右看齐/ 2021年09月27日 22:52/ 0 赞/ 451 阅读

相关 Select2 三级联动

Select2 三级联动效果图

朱雀/ 2020年10月24日 17:26/ 0 赞/ 745 阅读