layui省市县 三级连调显示和回显 可以同时获取select的两个值传送到后端
<form class="layui-form" lay-filter="formDemo">
<div class="layui-form-item">
<label class="layui-form-label">* 省份</label>
<div class="layui-input-block">
<select class="layui-select" name="province" id="provinceCode" lay-filter="province" lay-verify="required">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地市</label>
<div class="layui-input-block">
<select class="layui-select" name="city" lay-verify="city" id="cityCode" lay-filter="city">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">区县</label>
<div class="layui-input-block">
<select class="layui-select" name="county" lay-verify="county" id="countyCode" lay-filter="county">
<option value="">请选择</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<span id="upload"><button class="layui-btn" lay-submit="" lay-filter="demo1" onclick="return addhig();">立即提交</button></span>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button type="button" onclick="back();" class="layui-btn layui-btn-primary">返回</button>
</div>
</div>
</form>
<input type="hidden" id="city" />// 这个三个可以获取select中自定义的城市名
<input type="hidden" id="province" />
<input type="hidden" id="county" />
js
<script>
var hightlist = JSON.parse(sessionStorage.getItem("hightlist"));//需要修改信息的时候从别的页面获取的省市县的id
layui.use(['form', 'layedit', 'laydate'], function() {
var form = layui.form,
layer = layui.layer,
layedit = layui.layedit,
laydate = layui.laydate;
if(hightlist != null) {//hightlist 不为nul的时候回显
var provinceCode = hightlist.provinceCode;
var cityCode = hightlist.cityCode;
var countyCode = hightlist.countyCode;
pinit(provinceCode);
cityinit(provinceCode, cityCode);
countyinit(cityCode, countyCode);
}
pinit();
form.on('select(province)', function(data) {
cityinit(data.value, "");
var aaa = $(data.elem).find("option:selected").attr("title");//获取选中的title值赋值到隐藏域
$('#province').val(aaa);
});
form.on('select(city)', function(data) {
countyinit(data.value, "");
var aaa = $(data.elem).find("option:selected").attr("title");
$('#city').val(aaa);
});
form.on('select(county)', function(data) {
var aaa = $(data.elem).find("option:selected").attr("title");
$('#county').val(aaa);
});
});
//初始化省数据方法
function pinit(provinceCode) {
$.ajax({
url: base.baseUrl + 'regoin/getProvince.do',
xhrFields: {
withCredentials: true
},
dataType: "json",
success: function(res) {
var options = '';
for(var i = 0; i < res.length; i++) {
if(provinceCode == res[i].provinceCode) {
options += ' res[i].provinceCode + '" title="' + res[i].provinceName + '" selected="selected">' + res[i].provinceName + ''
} else {
options += ' res[i].provinceCode + '" title="' + res[i].provinceName + '" >' + res[i].provinceName + ''
}
}
$("#provinceCode").append(options);
layui.use('form', function() {
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.render();
});
}
});
}
//初始化市数据方法
function cityinit(data, cityCode) {
$.ajax({
url: base.baseUrl + 'regoin/getCity.do',
xhrFields: {
withCredentials: true
},
data: {
"provinceCode": data
},
dataType: "json",
success: function(res) {
$("#cityCode").empty("");
var options = '';
for(var i = 0; i < res.length; i++) {
if(cityCode == res[i].cityCode) {
options += ' res[i].cityCode + '" title="' + res[i].cityName + '" selected="selected">' + res[i].cityName + ''
} else {
options += ' res[i].cityCode + '" title="' + res[i].cityName + '">' + res[i].cityName + ''
}
}
$("#cityCode").append(options);
layui.use('form', function() {
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.render();
});
}
});
}
//初始化区县数据方法
function countyinit(data, countyCode) {
$.ajax({
url: base.baseUrl + 'regoin/getCounty.do',
xhrFields: {
withCredentials: true
},
data: {
"cityCode": data
},
dataType: "json",
success: function(res) {
$("#countyCode").empty("");
var options = '';
for(var i = 0; i < res.length; i++) {
if(countyCode == res[i].areaCode) {
options += ' res[i].areaCode + '" title="' + res[i].areaName + '" selected="selected">' + res[i].areaName + ''
} else {
options += ' res[i].areaCode + '" title="' + res[i].areaName + '">' + res[i].areaName + ''
}
}
$("#countyCode").append(options);
layui.use('form', function() {
var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
form.render();
});
}
});
}
//提交到后台的代码 这边有的数据我在上面没有显示了 可以自行忽略看省市县即可
function addhig() {
var id = $('#eid').val();
var hraId = $('#hraId').val();
var provinceCode = $('#provinceCode').val();
var cityCode = $('#cityCode').val();
var countyCode = $('#countyCode').val();
var province = $('#province').val();
var city = $('#city').val();
var county = $('#county').val();
var specificAddress = $('#specificAddress').val();
var createStaff = $('#createStaff').val();
var createTime = $('#createTime').val();
var status = $("#status").prop("checked");
if(provinceCode == "") {
return false;
}
if(id != 'null' && id != '') {
$.ajax({
url: base.baseUrl + 'HighRisk/update.do',
xhrFields: {
withCredentials: true
},
type: "post",
data: {
"id": id,
"hraId": hraId,
"province": province,
"city": city,
"county": county,
"provinceCode": provinceCode,
"cityCode": cityCode,
"countyCode": countyCode,
"specificAddress": specificAddress,
"createStaff": createStaff,
"createTime": createTime,
"status": status
},
dataType: "json",
success: function(res) {
if(res.success) {
layer.msg('修改成功');
back();
} else {
layer.msg('修改失败', {
icon: 5
});
}
}
});
} else {
$.ajax({
url: base.baseUrl + 'HighRisk/add.do',
xhrFields: {
withCredentials: true
},
type: "post",
data: {
"provinceCode": provinceCode,
"cityCode": cityCode,
"countyCode": countyCode,
"province": province,
"city": city,
"county": county,
"specificAddress": specificAddress,
"createStaff": createStaff,
"status": status
},
dataType: "json",
success: function(res) {
if(res.success) {
layer.msg('添加成功');
back();
} else {
layer.msg('添加失败', {
icon: 5
});
}
}
});
}
return false;
}
</script>