前言:今天在写城市三级联动的时候发现,当选择某个选项为空的时候,无法清空选项信息,所以特此做个记录,也好给需要这个功能的小伙伴一些启示和参考,重点描述前端如何操作!JS请求可写公共方法调用!
第一准备工作:准备城市信息SQL
第二前端页面【Laui】:
HTML:
站点区域
请选择省份
{volist name="province" id="vo"}
{$vo.area_name}
{/volist}
(必填)
JS:
// 一级联动事件触发
form.on('select(province)', function(data){
var id = data.value;
if(!id) {
//重置城市数据
var continentOption="请选择城市";
$("#city").empty();//清空上一个查询下拉值
$("#city").append(continentOption);
form.render(); //重新渲染form表单 否则动态option不生效
//重置区县数据
var continentOption="请选择区县";
$("#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("请选择城市");
$.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="请选择区县";
$("#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("请选择区县");
$.each(data.data, function (index, item) {
$('#district').append(new Option(item.area_name, item.id));//往下拉菜单里添加元素
form.render('select'); //这个很重要
});
}
});
});
Jack_num1
发布了29 篇原创文章 · 获赞 6 · 访问量 5万+
私信
关注
标签:district,form,continentOption,layui,item,联动,PHP,data,id
来源: https://blog.csdn.net/Jack_num1/article/details/104554413