关于Layui的多层级的下拉选项Select使用教程

案例代码

      <select name="parentSelect" lay-filter="parentSelect">
                        <option value="">请选择父级选项</option>
                        <option value="1">父级选项1</option>
                        <option value="2">父级选项2</option>
                        <!-- 添加其他父级选项 -->
                    </select>
                    
                    <select name="childSelect" lay-filter="childSelect">
                        <option value="">请选择子级选项</option>
                    </select>

js部分

 
 layui.use(['form'], function(){
    var form = layui.form;

    // 监听父级 select 元素的变化事件
    form.on('select(parentSelect)', function(data){
        var parentId = data.value; // 获取选择的父级选项值

		$.ajax({
			url: 'ymtypeselect',
			type: 'post',
			data: {
			   typeid : parentId
			},
			success: res => {
		 
			        var childSelect = $('select[name="childSelect"]'); // 获取子级 select 元素
                    childSelect.empty(); // 清空子级 select 的选项

                    if (res.length === 0) {
                        // 如果子级选项为空，添加一个默认的提示选项
                        childSelect.append('<option value="">暂无子级选项</option>');
                    } else {
                        // 遍历返回的数据数组
                        res.forEach(option => {
                            // 创建 option 元素
                            var optionElement = $('<option></option>').attr('value', option.id).text(option.title);
                            // 将 option 元素添加到子级 select 中
                            childSelect.append(optionElement);
                        });
                    }

                    // 渲染 form 组件，使得动态添加的子级选项生效
                  form.render('select');
			}
		});
     
    });
});