用select2做级联下拉选择

用select2做级联下拉选择

两个下拉框，通过选择年级下拉框进行查询该年级下的所有班级。

可以对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 + '">&nbsp;&nbsp;&nbsp;&nbsp;' + 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自动选中安徽省合肥市