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自动选中安徽省合肥市

猜你喜欢

转载自blog.csdn.net/qq_28917403/article/details/79927772