select2 实践总结

Posted 2020-08-07

1、主要依赖

<link rel="stylesheet" href="/css/select2.min.css">

<script src="/js/select2.min.js"></script>

<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

2、主要代码

大洲(*)国家(*)城市景区(*)

3、主要效果，带前后台联动效果

4、初始化js

//大洲
$("#sel_menu2").select2({
    tags: true,
    placeholder: "请选择大洲",
    ajax: {                 //获取大洲
        url: "/stock/getAreas",
        dataType: ‘json‘,
        delay: 250,
        processResults: function (data, page) {
            console.log(data);
            var parsed = data;
            var arr = [];
            for(var x in parsed){
                arr.push(parsed[x]); //这个应该是个json对象
            }
            console.log(arr);
            return {
                results: arr
            };
        }
    }
});

//城市
$("#sel_menu3").select2({
    tags: true,
    maximumSelectionLength: 10, //最多能够选择的个数
    placeholder: "请选择城市",
    ajax: {                 //获取大洲
        url: "/stock/htgetArealines",
        dataType: ‘json‘,
        delay: 250,
        data: function () {
            return {
                areaid: $("#sel_menu2").select2(‘data‘)[0].id // search term
            };
        },
        processResults: function (data, page) {
            console.log($("#sel_menu2").select2(‘data‘)[0].id);
            console.log($("#sel_menu2").select2(‘data‘)[0]);
            var parsed = data;
            var arr = [];
            for(var x in parsed){
                arr.push(parsed[x]); //这个应该是个json对象
            }
            console.log(arr);
            return {
                results: arr
            };
        }
    }
});

//城市景区
$("#sel_menu4").select2({
    tags: true,
    maximumSelectionLength: 10, //最多能够选择的个数
    placeholder: "请选择城市景区",
    ajax: {                 //获取大洲
        url: "/stock/getScenicCity",
        dataType: ‘json‘,
        delay: 250,
        data: function () {
            return {
                areaid: $("#sel_menu2").select2(‘data‘)[0].id, // search term
                cityid:function(){
                    var citystr=""
                    var city = $("#sel_menu3").select2(‘data‘);
                    for(var i=0;i<city.length;i++){
                        if(i+1==city.length){
                            citystr +=city[i].id;
                        }else{
                            citystr +=city[i].id+",";
                        }
                    }
                    return citystr;
                }
            };
        },
        processResults: function (data, page) {
            console.log($("#sel_menu2").select2(‘data‘)[0].id);
            console.log(data);
            var parsed = data;
            var arr = [];
            for(var x in parsed){
                arr.push(parsed[x]); //这个应该是个json对象
            }
            console.log(arr);
            return {
                results: arr
            };
        }
    }
});

主要注意点：

ajax请求用于异步获取数据data：返回的数据是请求参数

processResults：是返回的数据，数据格式为json,select2初始化数据的格式为array：

在修改时初始化数据回显的时候ajax请求的数据格式为：

selected:控制选项是否选中

disabled:控制是否可以选中

当点击大洲，国家时，它的下级关联者清除事件：

$(‘#sel_menu2‘).on(‘change‘,function(){
    $(‘#sel_menu3‘).val(null).trigger("change");
});

本文出自 “12019836” 博客，请务必保留此出处http://12029836.blog.51cto.com/12019836/1850629