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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_28917403

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值