首页 > 其他分享 >关于Layui的多层级的下拉选项Select使用教程

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

时间:2024-04-11 18:22:06浏览次数:28  
标签:选项 层级 option form 父级 Layui childSelect Select 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');
			}
		});
     
    });
});
 

标签:选项,层级,option,form,父级,Layui,childSelect,Select,select
From: https://www.cnblogs.com/79524795-Tian/p/18129832

相关文章

  • 基于SSM+MySql+Layui的在线教育视频课程管理系统(附论文)
    演示视频基于SSM+MySql+Layui的在线教育视频课程管理系统(附论文)-源码乐园技术描述开发工具:Idea/Eclipse数据库:mysqlJar包仓库:Maven前段框架:LayUI后端框架:Spring+SpringMVC+Mybatis+MySQL文字描述基于SSM+MySql+Layui的在线教育视频课程管理系统,分为用......
  • el-table(V 2.15.14)在使用树结构表格并且设置align = 'center'后 树结构层级不明显问
    开发中遇到的小问题:如图所示三个层级区分并不明显,用户体验差解决方案:自定义CSS:首先取消此列的align="center"然后插入以下代码(此CSS为更改图示第二列的样式如果是其它列请自己获取样式名称)//标题居中::v-deepth.el-table_1_column_2.is-leaf.el-table__cell{t......
  • MyBatis中如果某个查询不希望使用缓存,可以在映射文件中的select语句上设置flushCache=
    <selectid="xmlGetGuaranteeCount"databaseId="sqlserver"resultType="Integer"flushCache="true"><![CDATA[SELECTcount(appisparea.ID)FROMT_APP_ISP_ARE......
  • sql server在高并发状态下同时执行Select查询与Update更新操作时的死锁问题
    最近在项目上线使用过程中使用SqlServer的时候发现在高并发情况下,频繁更新和频繁查询引发死锁。通常我们知道如果两个事务同时对一个表进行插入或修改数据,会发生在请求对表的X锁时,已经被对方持有了。由于得不到锁,后面的Commit无法执行,这样双方开始死锁。但是select语句和upda......
  • select详细用法
    数据库版本:KingbaseESV008R006C008B0014        简介  SELECT语句是用于从一个或多个表中检索数据的操作,它作为数据库DQL语言,可以通过特定条件从表中检索数据。本篇文章以kingbase为例介绍select的详细用法。        文章目录如下1.基本语法2......
  • SELECT list is not in GROUP BY clause and contains nonaggregated column 'uav.cas
     mysql5.7以上版本抛出错误,SELECTlistisnotinGROUPBYclauseandcontainsnonaggregatedcolumn'uav.case_board.port'whichisnotfunctionallydependentoncolumnsinGROUPBYclause;thisisincompatiblewithsql_mode=only_full_group_bygrougby在5......
  • 并发编程之Java中Selector
    系列文章目录文章目录系列文章目录前言前言前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。Selector提供选择执行已经就绪的任务的能力,使得多元I/O成为可能,就绪选......
  • WPF combobox selectionchanged and triggered the listbox scroll/locate to the sel
    //xaml<Windowx:Class="WpfApp48.MainWindow"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.mic......
  • CSS——定位的层级以及定位的特殊应用
    在CSS中,定位的层级是指通过z-index属性控制元素在堆叠顺序中的显示优先级。z-index属性的值为整数,值越大的元素会显示在值较小的元素之上。1.定位的层级通过z-index属性可以控制定位元素在堆叠顺序中的显示优先级。默认情况下,未定位的元素的z-index值为auto,定位元素......
  • WPF datagrid mvvm multi select via customize datagrid
    usingSystem;usingSystem.Collections;usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Threading.Tasks;usingSystem.Windows;usingSystem.Windows.Controls;namespaceWpfApp39{publicclassMultiSelectDataGrid:D......