大佬教程收集整理的这篇文章主要介绍了layui三级联动【PHP版】，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
前言：今天在写城市三级联动的时候发现，当选择某个选项为空的时候，无法清空选项信息，所以特此做个记录，也好给需要这个@L_801_0@的小伙伴一些启示和参考，重点描述前端如何操作！JS请求可写公共方法调用！
第一准备工作：准备城市信息sql
第二前端页面【Laui】：
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'); //这个很重要
});
}
});
});
以上是大佬教程为你收集整理的layui三级联动【PHP版】全部内容，希望文章能够帮你解决layui三级联动【PHP版】所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。