layui 省市县级联

发布时间 2023-09-22 11:24:44作者: iamwhy

 

<div class="layui-form-item">
    <div class="layui-inline">
        <label class="layui-form-label" style="width: 140px">
            <span style="color: red">*</span>现住址:
        </label>
        <div class="layui-input-inline">
             <select name="sel_province" lay-verify="required" id="sel_province" lay-filter="sel_province">
            </select>
        </div>
        <div class="layui-input-inline">
            <select name="sel_city" lay-verify="required" id="sel_city" lay-filter="sel_city"></select>
        </div>
        <div class="layui-input-inline">
            <select name="sel_county" lay-verify="required" id="sel_county" lay-filter="sel_county"></select>
        </div>
        <div class="layui-input-inline">
            <input type="text" style="width:180px" id="diseaseaddress" name="diseaseaddress" placeholder="请输入详细地址" lay-verify="title" autocomplete="off" class="layui-input">
        </div>
    </div>
</div>

initPcc('330000','330100','330127');    //初始化省市县 浙江省 杭州市 淳安县, 可用于回显

function initPcc(procode,citycode,countycode){
//初始化省
$.ajax({
    url: 'footborne/dict/province.htm',    // 后台取到所有的省份名称 
    dataType: 'json',
    type: 'get',
    success: function (resData) {
        $('#sel_province').empty();
        var option = "<option value=''>请选择</option>";
        var selData = resData.data;
        for(var i = 0;  i < selData.length; i++){
            if(selData[i].value == procode){
                option += ("<option value=" + selData[i].value + " selected>" + selData[i].name + "</option>");
                continue;
            }
            option += ("<option value=" + selData[i].value + ">" + selData[i].name + "</option>");
        }
        $("#sel_province").append(option);
        form.render('select');//渲染select
    }
});
//初始化市
$.ajax({
    url: 'footborne/dict/city.htm',
    dataType: 'json',
    type: 'get',
    data: {
        selProvince: procode
    },
    success: function (resData) {
        $('#sel_city').empty();
        var option = "<option value=''>请选择</option>";
        var selData = resData.data;
        for(var i = 0;  i < selData.length; i++){
            if(selData[i].value == citycode){
                option += ("<option value=" + selData[i].value + " selected>" + selData[i].name + "</option>");
                continue;
            }
            option += ("<option value=" + selData[i].value + ">" + selData[i].name + "</option>");
        }
        $("#sel_city").append(option);
        form.render('select');//渲染select
    }
 });
 //初始化县
 $.ajax({
    url: 'footborne/dict/county.htm',
    dataType: 'json',
    type: 'get',
    data: {
        selCity: citycode
    },
    success: function (resData) {
        $('#sel_county').empty();
        var option = "<option value=''>请选择</option>";
        var selData = resData.data;
        for(var i = 0;  i < selData.length; i++){
             if(selData[i].value == countycode){
                option += ("<option value=" + selData[i].value + " selected>" + selData[i].name + "</option>");
                continue;
            }
            option += ("<option value=" + selData[i].value + ">" + selData[i].name + "</option>");
        }
        $("#sel_county").append(option);
        form.render('select');//渲染select
    }
});
}
// 第二步
form.on('select(sel_province)', function(data){
$('#sel_city').empty();
$('#sel_county').empty();
var sel_province_value = data.value; // roomName 选中的省份名称
$.ajax({
    url: 'footborne/dict/city.htm',
    dataType: 'json',
    type: 'get',
    data: {
        selProvince: sel_province_value
    },
    success: function (resData) {
        $('#sel_city').empty();
        var option = "<option value=''>请选择</option>";
        var selData = resData.data;
        for(var i = 0;  i < selData.length; i++){
            option += ("<option value=" + selData[i].value + ">" + selData[i].name + "</option>");
        }
        $("#sel_city").append(option);
        form.render('select');//渲染select
    }
});
});
// 第三步
form.on('select(sel_city)', function(data){
var sel_city_value = data.value; // roomName 选中的省份名称
$.ajax({
    url: 'footborne/dict/county.htm',
    dataType: 'json',
    type: 'get',
    data: {
        selCity: sel_city_value
    },
    success: function (resData) {
        $('#sel_county').empty();
        var option = "<option value=''>请选择</option>";
        var selData = resData.data;
        for(var i = 0;  i < selData.length; i++){
            option += ("<option value=" + selData[i].value + ">" + selData[i].name + "</option>");
        }
        $("#sel_county").append(option);
        form.render('select');//渲染select
    }
});
});