layer表单元素 三级联动 省市县选择框动态渲染问题解决

$(document).ready(function() {

layui.use(['layer', 'form'], function(){

var layer = layui.layer

,form = layui.form();

//获取省市县value

var isprovince = $('#area').attr('province');

var iscity = $('#area').attr('city');

var isdistrict = $('#area').attr('district');

var ajaxUrl = "../../ajax/get-city-list";

//选择省份

$("#province option").each(function(){

var $me = $(this);

if($me.val() == isprovince) {

$me.attr("selected",true);

}else{

$me.attr("selected",false);

}

});

//请求当前省份的所有市区

$.ajax({

type: "get",

url: ajaxUrl,

async: true,

data: {

"fid": isprovince

},

dataType: "json",

success: function(data) {

//渲染市区

$("#city").html("");

$("#city").append("<option value=''>请选择市</option>");

$.each(data, function(i, n) {

$("#city").append("<option value='" + n.area_id + "'>" + n.name + "</option>");

});

//选择市区

$("#city option").each(function(){

var $my = $(this);

if($my.val() == iscity) {

$my.attr("selected",true);

}else{

$my.attr("selected",false);

}

});

//最后重新渲染

form.render('select');

},

error: function() {

alert("错误");

}

});

//请求当前市区的所有县

$.ajax({

type: "get",

url: ajaxUrl,

async: true,

data: {

"fid": iscity

},

dataType: "json",

success: function(data) {

//渲染县

$("#district").html("");

$("#district").append("<option value=''>请选择县/区</option>");

$.each(data, function(i, n) {

$("#district").append("<option value='" + n.area_id + "'>" + n.name + "</option>");

})

//选择县

$("#district option").each(function(){

var $one = $(this);

if($one.val() == isdistrict) {

$one.attr("selected",true);

}else{

$one.attr("selected",false);

}

});

//最后重新渲染

form.render('select');

}

});

$('.js-sign').on('click', function() {

layer.open({

type: 2,

area: ['910px', '959.7px'],

title: ['签到','text-align:center,font-size:18px'],

content: ['/admin/sign/to-sign-page','no'], //不出现滚动条，content: ['http:', 'no']

anim:1,

closeBtn: 2

});

});

});

$('.btnsub').on('click',function(){

var province = $('#province+div .layui-this').attr('lay-value');

var city = $('#city+div .layui-this').attr('lay-value');

var district = $('#district+div .layui-this').attr('lay-value');

var disease = $('#disease').text();

$.ajax({

url:'/admin/user/save-user-data',

type:'post',

dataType:'json',

data:{province:province,city:city,district:district,common_diseases:disease},

beforeSend:function(){

layer.msg('正在保存...');

$('.btnsub').attr({disabled:"disabled"});

$('.btnsub').text('正在保存');

},

success:function(res){

if(res.code == 1){

layer.msg('保存成功！');

}else{

layer.msg('error');

}

},

complete: function(){

$(".btnsub").removeAttr("disabled");

$('.btnsub').text('保存');

},

error : function(XMLHttpRequest, textStatus, errorThrown) {

layer.msg('网络失败，请刷新页面后重试');

}

});

});

});

<div class="layui-form-item">

<label class="layui-form-label">省/市/区</label>

<div class="layui-input-block">

<div class="layui-input-inline">

<select name="province" lay-verify="province" lay-filter="province"

id="province">

<option value="">请选择省</option>

<?php foreach ($provinceList as $key => $value):?>

<option value="<?= $value['area_id'] ?>"><?= $value['name'] ?></option>

<?php endforeach;?>

</select>

</div>

<div class="layui-input-inline">

<select name="city" lay-filter="city" id="city">

<option value="">请选择市</option>

</select>

</div>

<div class="layui-input-inline">

<select name="district" lay-filter="district" id="district">

<option value="">请选择县/区</option>

</select>

</div>

</div>

</div>