用select2做级联下拉选择

ゝ一世哀愁。 2021-06-26 16:06 716阅读 0赞

## 用`select2`做级联下拉选择 ##

两个下拉框，通过选择年级下拉框进行查询该年级下的所有班级。  
![在这里插入图片描述][20200617151905155.png]  
可以对`select`添加`onchage`事件，监控下拉事件，下拉选择年级，把年级`id`传入后台查询出该年级下属班级，把班级列表展示到下拉框。

js：

$("#grade").change(function () { 
        var grade= $("#grade").val();
        $.ajax({ 
            url:base + "/user/grade/list",
            dataType: "JSON",
            data: { 'gradeId': grade},
            type: "GET",
            success:function (data) { 
                var gradeNum= data.length;
                var option = "<option value=''>请选择年级</option>";
                if(gradeNum>0){ 
                    $("#labId").html(option);
                    for(var i = 0;i<gradeNum;i++){ 
                        option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                    }
                }
                $("#class").html(option);
                $("#class").val(Id); //编辑时绑定
                $("#class").select2({  minimumResultsForSearch: -1 });//加载样式
            },
            error:function(e) { 
                layer.alert("系统异常，请稍候重试！");
            }
        });
    });

--------------------

## `select2` 下拉框 联动 根据文本赋值 以及设置选中 和 初始化demo ##

根据输入的车牌号 自动判断 所属省份 和 城市

例如 我输入`皖A85294` 自动选择安徽省合肥市 的示例，语言功底不好，直接贴代码了哈

/**加载省份城市和区域的信息***/
    function loadSuccessProAndCity() { 
        $.ajax({ 
            url: ctx + '/sys/region/authc_json/provinceAppInfo.shtml',
            async: false,
            type: 'POST',
            dataType: 'json',
            success: function (data) { 
                if (data) { 
                    var provinceApp_json = data.data;
                    var provinceApp = $("#addVehicleForm #provinceId");
                    provinceApp.empty();
                    provinceApp.append('<option value="-1">---请选择---</option>');
     
                    var cityId = $("#addVehicleForm #cityId");
                    cityId.empty();
                    cityId.append('<option value="-1">---请选择---</option>');
     
                    var provinceApp_length = provinceApp_json.length;
                    for (var i = 0; i < provinceApp_length; i++) { 
                        var province = provinceApp_json[i];
                        var alias = province.alias ;
                        if(alias==undefined){ 
                            alias='';
                        }else{ 
                            alias = '[' +alias+ ']' ;
                        }
                        provinceApp.append('<option value="' + province.id + '">    ' + province.name + alias + '</option>');
                    }
                    provinceApp.select2();
     
                    provinceApp.on('change', function (e) { 
                        var selected = $(this).find("option:selected").val();
                        if (selected == "-1") { 
                            var cityId = $("#addVehicleForm #cityId");
                            cityId.empty();
                            cityId.append('<option value="-1">---请选择---</option>');
                        } else { 
                            var cities = new Array();
                            $.ajax({ 
                                url: ctx + '/sys/region/authc_json/cityAppInfo.shtml?pid=' + selected,
                                async: false,
                                type: 'POST',
                                dataType: 'json',
                                success: function (data) { 
                                    if (data) { //改汽车品牌下面有系列
                                        cities = data.data;
                                    }
                                }
                            });
                            var cityId = $("#addVehicleForm #cityId").empty();
                            if (cities.length > 0) { 
                                cityId.append('<option value="-1">---请选择---</option>');
                                for (var j = 0; j < cities.length; j++) { 
                                    var cityApp = cities[j];
                                    var alias = cityApp.alias ;
                                    if(alias==undefined){ 
                                        alias='';
                                    }else{ 
                                        alias = '[' +alias+ ']' ;
                                    }
                                    var reg = /^#[a-zA-Z]+#/;
                                    cityId.append('<option value="' + cityApp.id + '">' + cityApp.name.replace(reg, "") + alias +'</option>');
                                }
                                cityId.select2();
                            }
                        }
                    });
                }
            }
        });
    }

//根据车牌号首字母自动设置select 的省份和城市选中
    $("#addVehicleForm #licenseNo").blur(function(){ 
        var licenseNo = $(this).val();
        var firstOne = licenseNo.charAt(0);
        var secondOne = licenseNo.charAt(1);
     
        $("#addVehicleForm #provinceId").find(":contains('["+firstOne+"]')").attr('selected',true).trigger('change');
        $("#addVehicleForm #cityId").find(":contains('["+secondOne+"]')").attr('selected',true).trigger('change');
    })

// 如果知道 select 下拉框需要选择的val 直接采用这种赋值方式即可
    $("#addVehicleForm #provinceId option:first").prop("selected", 'selected');
    $("#addVehicleForm #provinceId").trigger('change.select2');
     
    $("#addVehicleForm #cityId").empty();
    $("#addVehicleForm #cityId").append('<option value="-1">---请选择---</option>');

做法，第一步先加载下拉框的省份数据，根据省份的`change` 自动发送`ajax` 到后台请求市区的数据即可。之后车牌号中如果输入皖A自动选中安徽省合肥市

[20200617151905155.png]: /images/20210626/c6d4547b7d054e8b90278469bfc3a0ee.png