前言:今天在写城市三级联动的时候发现,当选择某个选项为空的时候,无法清空选项信息,所以特此做个记录,也好给需要这个功能的小伙伴一些启示和参考,重点描述前端如何操作!JS请求可写公共方法调用!
第一准备工作:准备城市信息SQL
第二前端页面【Layui框架】:
HTML:
<div class="layui-form-item">
<label class="layui-form-label">站点区域</label>
<div class="layui-input-inline">
<select name="provinceId" id="province" lay-filter="province" lay-verify="required">
<option value="">请选择省份</option>
{volist name="province" id="vo"}
<option value="{$vo.id}">{$vo.area_name}</option>
{/volist}
</select>
</div>
<div class="layui-input-inline">
<select name="cityId" id="city" lay-filter="city" lay-verify="required">
<option value="">请选择城市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="districtId" id="district" lay-verify="required">
<option value="">请选择区县</option>
</select>
</div>
<div class="layui-form-mid layui-word-aux">(必填)</div>
</div>
JS:
// 一级联动事件触发
form.on('select(province)', function(data){
var id = data.value;
if(!id) {
//重置城市数据
var continentOption="<option value=''>请选择城市</option>";
$("#city").empty();//清空上一个查询下拉值
$("#city").append(continentOption);
form.render(); //重新渲染form表单 否则动态option不生效
//重置区县数据
var continentOption="<option value=''>请选择区县</option>";
$("#district").empty();//清空上一个查询下拉值
$("#district").append(continentOption);
form.render(); //重新渲染form表单 否则动态option不生效
return;
}
//请求接口
admin.req({
url: '/admin/vis/add', //实际使用请改成服务端真实接口
data: {'id': id},
method: "POST",
done: function (data) {
$("#city").html("<option value=''>请选择城市</option>");
$.each(data.data, function (index, item) {
$('#city').append(new Option(item.area_name, item.id));//往下拉菜单里添加元素
form.render('select'); //选中
});
}
});
});
// 二级联动事件触发
form.on('select(city)', function(data){
var id = data.value;
if(!id) {
var continentOption="<option value=''>请选择区县</option>";
$("#district").empty();//清空上一个查询下拉值
$("#district").append(continentOption);
form.render(); //重新渲染form表单 否则动态option不生效
return;
}
//请求接口
admin.req({
url: '/admin/vis/add', //实际使用请改成服务端真实接口
data: {'id': id},
method: "POST",
done: function (data) {
$("#district").html("<option value=''>请选择区县</option>");
$.each(data.data, function (index, item) {
$('#district').append(new Option(item.area_name, item.id));//往下拉菜单里添加元素
form.render('select'); //选中
});
}
});
});