html,我这里使用的是jsp,所以用到了c标签,如果是html的可以使用ajax来初始化顶级分类
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-inline">
<select name="tag1" lay-filter="tag1" lay-verify="required">
<option value="">请选择一级分类</option>
<c:forEach items="${tags1 }" var="tag">
<option value="${tag.id}">${tag.name}</option>
</c:forEach>
</select>
</div>
<div class="layui-input-inline" >
<select name="tag2" lay-filter="tag2" lay-verify="required">
<option value="">请选择二级分类</option>
</select>
</div>
<div class="layui-input-inline">
<select name="tag3" lay-filter="tag3" lay-verify="required">
<option value="">请选择三级分类</option>
</select>
</div>
</div>
js,监听一级二级分类下拉框选择事件,动态查询数据库分类
form.on('select(tag1)', function (data) {
// console.log(data.elem); //得到select原始DOM对象
// console.log(data.value); //得到被选中的值
// console.log(data.othis); //得到美化后的DOM对象
var parentId = data.value;
if (parentId === "" || parentId < 1) {
return;
}
$.post("${baseUrl }/cms/admin/knowlege/getchildrentags", {parentId: parentId}, function (res) {
if(res.code==0){
var tag2List= res.result;
var options="";
for (var i = 0; i < tag2List.length; i++) {
var tag = tag2List[i];
options+=' <option value="'+tag.id+'">'+tag.name+'</option>';
}
$("select[name='tag2']").html(options)
//初始化子分类
//参数1 type 参数2 filter
form.render('select');
}
else{
layer.msg('系统异常!', {icon: 5});
}
})
});
form.on('select(tag2)', function (data) {
var parentId = data.value;
if (parentId === "" || parentId < 1) {
return;
}
$.post("${baseUrl }/cms/admin/knowlege/getchildrentags", {parentId: parentId}, function (res) {
if(res.code==0){
var tag3List= res.result;
var options="";
for (var i = 0; i < tag3List.length; i++) {
var tag = tag3List[i];
options+=' <option value="'+tag.id+'">'+tag.name+'</option>';
}
$("select[name='tag3']").html(options)
//初始化子分类
//参数1 type 参数2 filter
form.render('select');
}
else{
layer.msg('系统异常!', {icon: 5});
}
})
});