Sun_Blog

省市区三级联动+初始值

发布时间:3年前热度: 350 ℃评论数:

<div class="layui-form-item">
        <label class="layui-form-label">省市区</label>
        <div class="layui-input-block" style="display: flex">
            <select name="sheng" lay-verify="required" id="sheng" lay-filter="sheng">
                <option value=""></option>
            </select>

            <select name="shi" lay-verify="required" id="shi" lay-filter="shi">
                <option value=""></option>

            </select>

            <select name="qu" lay-verify="required" id="qu" lay-filter="qu">
                <option value=""></option>
            </select>
        </div>

    </div>


function to_val(data){
var res = [];
res.sheng = "{$info['province']}";
res.shi = "{$info['city']}";
res.qu = "{$info['qu']}";
console.log(res.sheng+'==='+res.shi+'==='+res.qu);
form.render();
return res;
}

$.ajax({
type: "GET",
url: "{MODULE_URL}template/web/js/ssq.txt",
dataType: "json",
success: function (data) {
var res = to_val(data);
that.data.ssq = data;
var html = '';
for(var key in data){
if (res.sheng == key){
html += '<option value='+key+' selected>'+data[key].name+'</option>';
} else{
html += '<option value='+key+'>'+data[key].name+'</option>';
}
}
$("#sheng").append(html);
var a = res.sheng; //省代码
var b = res.shi; //市代码
var c = res.qu;//区代码
var shi_name = data[a].child[b].name;
var qu_name = data[a].child[b].child[c];
html = '<option value='+b+'>'+shi_name+'</option>';
$("#shi").html(html);
html = '<option value='+c+'>'+qu_name+'</option>';
$("#qu").html(html);
form.render()
}
});

/*省被选择*/
form.on('select(sheng)', function(data){
$("#shi").html('');
$("#qu").html('');
var ssq = that.data.ssq;

var shi = ssq[data.value].child;
that.data.ss = shi;
console.log(shi);
var html = '';
for(var key in shi){
html += '<option value='+key+'>'+shi[key].name+'</option>';
}
$("#shi").append(html);
form.render();
});

/*市被选择*/
form.on('select(shi)', function(data){

var ss = that.data.ss;

var qu = ss[data.value].child;
console.log(qu);
var html = '';
for(var key in qu){
html += '<option value='+key+'>'+qu[key]+'</option>';
}
$("#qu").append(html);
form.render();

});



json:
https://sun-server.cn/addons/sun_wy/template/web/js/ssq.txt

省市区三级联动+初始值

手机扫码访问