layui 省市区 三级联动

分享 未结 2 383
我输汉字可以吗
悬赏:20飞吻



<form class="layui-form" action="">
<div class="layui-body" style="margin-top:20px;">
<div style="padding:0 0 20px 40px" class="span">
<p><span style="color:red;">提示:该功能用来获取第三方学生体测数据</span></p>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择区域</label>
<div class="layui-input-inline">
<select id="province" lay-filter="province" lay-verify="required" lay-search="">
<option value="">请选择或搜索省</option>
</select>
</div>

<div class="layui-input-inline">
<select name="city" id="city" lay-filter="city" lay-verify="required" lay-search="" hospitalsel>
<option value="">请选择或搜索市</option>
</select>
</div>
<div class="layui-input-inline">
<select id="area" lay-filter="area" lay-verify="required" lay-search="">
<option value="">请选择或搜索县/区</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择年份</label>
<div class="layui-input-inline">
<select id="year" lay-filter="year" lay-verify="required" lay-search="">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="submit">查询</button>
<!--<input class="layui-btn layui-btn-primary" value="查询" onclick="findData()"></input>-->
<!--<input class="layui-btn" id="submit">立即提交</input>-->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</div>
</form>



<script>
layui.use('form', function() {
var form = layui.form;
form.render('select');
var token = window.localStorage.getItem("token");
$.ajax({
type: "POST",
url: "/qingmiao/api/sys/province",
headers: {
"Authorization": "bearer " + token
},
data: {id: 1},
dataType: "json", // 数据返回类型
cache: false, // 是否缓存
async: true, // 默认为true 异步请求
success: function (d) {
if(d.length>0){
var tmp = '';
for (var i in d) {
tmp += '<option value="' + d[i].provinceid + '">' + d[i].province + '</option>';
}
// $("#province").html(tmp);
$("#province").append(tmp)
form.render('select');
}
},
error: function (e) {
layui.use(['layer', 'form'], function () {
var layer = layui.layer
, form = layui.form;
layer.msg("系统错误,请联系管理员!");
});
return;
}
});
// /监听省下拉框(给区下拉框赋值)
form.on('select(province)', function(dataObj){
//移除城市下拉框所有选项
$("#city").empty();
var cityHtml = '<option value="">请选择或搜索市</option>';
$("#city").html(cityHtml);
var areaHtml = '<option value="">请选择或搜索县/区</option>';
$("#area").html(areaHtml);
provinceText = $("#province").find("option:selected").text();
var value = $("#province").val();
//异步加载下拉框数据
$.ajax({
type: "POST",
url: "/qingmiao/api/sys/city",
headers: {
"Authorization": "bearer " + token
},
data: {id: value},
dataType: "json", // 数据返回类型
cache: false, // 是否缓存
async: true, // 默认为true 异步请求
success: function (d) {
if(d.length>0) {
var tmp = '';
for (var i in d) {
tmp += '<option value="' + d[i].cityid + '">' + d[i].city + '</option>';
}
// $("#province").html(tmp);
$("#city").append(tmp)
form.render('select');
}
},
error: function (e) {
layui.use(['layer', 'form'], function () {
var layer = layui.layer
, form = layui.form;
layer.msg("系统错误,请联系管理员!");
});
return;
}
})
});
// /监听市下拉框(给区下拉框赋值)
form.on('select(city)', function(area) {
//移除城市下拉框所有选项
$("#area").empty();
var areaHtml = '<option value="">请选择或搜索县/区</option>';
$("#area").html(areaHtml);
var value = $("#city").val();
$.ajax({
type: "POST",
url: "/qingmiao/api/sys/area",
headers:{
"Authorization":"bearer "+token
},
data : {id:value},
dataType : "json",
success : function(d) {
if(d.length>0) {
var tmp = '';
for (var i in d) {
tmp += '<option value="' + d[i].areaid + '">' + d[i].area + '</option>';
}
// $("#province").html(tmp);
$("#area").append(tmp)
form.render('select');
}
},
error: function (e) {
layui.use(['layer', 'form'], function () {
var layer = layui.layer
, form = layui.form;
layer.msg("系统错误,请联系管理员!");
});
return;
}
});
});
// 监听县区下拉框
// form.on('select(area)', function(dataObj){
// areaText = $("#area").find("option:selected").text();
// });
});
</script>
回帖