使用layui 写一段动态向form表单添加select下拉框,带删除功能

2023-11-18

可以参考如下示例代码,实现动态向表单中添加和删除 select 下拉框:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态添加和删除下拉框</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
 
<div class="layui-container">
    <form class="layui-form" action="">
        <div id="select-container">
            <div class="layui-form-item">
                <label class="layui-form-label">下拉框1</label>
                <div class="layui-input-inline">
                    <select name="select1" lay-filter="select1">
                        <option value=""></option>
                    </select>
                </div>
                <div class="layui-input-inline">
                    <button type="button" class="layui-btn layui-btn-danger delete-select"><i class="layui-icon layui-icon-delete"></i> 删除</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="add-select"><i class="layui-icon layui-icon-add-1"></i> 添加下拉框</button>
            </div>
        </div>
    </form>
</div>
 
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
<script>
// layui初始化
layui.use(['form'], function(){
    var form = layui.form;
 
    // 添加下拉框按钮的点击事件
    $('#add-select').on('click', function(){
        // 获取已有下拉框个数
        var count = $('#select-container .layui-form-item').length;
        // 添加新的下拉框
        var selectHtml = '<div class="layui-form-item">'
                + '<label class="layui-form-label">下拉框' + (count + 1) + '</label>'
                + '<div class="layui-input-inline">'
                    + '<select name="select' + (count + 1) + '" lay-filter="select' + (count + 1) + '">'
                        + '<option value=""></option>'
                    + '</select>'
                + '</div>'
                + '<div class="layui-input-inline">'
                    + '<button type="button" class="layui-btn layui-btn-danger delete-select"><i class="layui-icon layui-icon-delete"></i> 删除</button>'
                + '</div>'
            + '</div>';
        $('#select-container').append(selectHtml);
        // 重新渲染下拉框
        form.render('select');
    });
 
    // 删除下拉框按钮的点击事件
    $('#select-container').on('click', '.delete-select', function(){
        $(this).closest('.layui-form-item').remove();
    });
});
</script>
 
</body>
</html>

运行该示例代码,即可看到一个表单中有一个下拉框和一个添加下拉框的按钮,点击按钮可以动态添加下拉框,并且每个下拉框旁边都有一个删除按钮,点击删除按钮即可删除对应的下拉框。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用layui 写一段动态向form表单添加select下拉框,带删除功能 的相关文章

随机推荐

  • 基于 APISIX 的服务网格方案 Amesh 积极开发中!

    作者 lingsamuel API7 ai 云原生技术专家 Apache APISIX Committer 在云原生快速发展的前提下 服务网格领域也开始逐渐火热 目前阶段 大家所熟知的服务网格解决方案很多 每种产品又各有其优势 因此在面对不
  • 禁止浏览器访问某些页面

    windows下 利用php apache http代理 实现本地页面黑名单 背景 准备工作 解决方案 背景 有一个项目 需要给第三方桌面软件做二次开发 但是这个软件启动时会弹出一个页面 这个页面的权限很大 如果不禁止掉的话 会给系统安全带
  • 51Nod 1081 子段求和

    题目链接 http www 51nod com Challenge Problem html problemId 1081 include
  • linux笔记整理

    Linux基础 一 基础目录 根目录 下 bin 存放普通用户可以使用的命令 boot 存放引导程序 内核等 dev 设备文件目录 etc 配置文件目录 home 普通用户家目录 lib 库文件和内核模块存放目录 lib64 64位库 pr
  • mybatis 日期格式化

    例子 SELECT date format create date Y m d H i s date format update date Y m d FROM user Y m d H i s 带时分秒 Y m d 不带时分秒
  • 设计一个算法判断表达式中的括号是否匹配

    一 问题描述 设计一个算法判断表达式中的括号是否匹配 二 问题解答 解析 这里需要用到STL在算法设计中的应用 STL在算法设计中的应用有如下几种 存放主数据 存放临时数据 检测数据元素的唯一性 数据的排序 优先队列作为堆 因此这里需要用上
  • 安装visio报错,提示无法安装64位版本的Office,找到了以下32位程序怎么办

    今天安装Visio准备用来写系统详细说明书上面画图的结果发现居然报错 实在是我也没有装过office 试过了几个方案什么office修复助手啊 什么什么的发现卵用没有 最后解决方案 win r打开运行 输入regedit 依次到HKEY C
  • 服务器拔下内存条系统不能启动,电脑主板不能启动的解决方法

    电脑主板不能启动的解决方法 因为主板扩展槽或扩展卡有问题 导致插上显卡 声卡等扩展卡后 主板没有响应 因此造成开机无显示 例如蛮力拆装agp显卡 导致agp插槽开裂 即可造成此类故障 下面是JY135小编收集整理的电脑主板不能启动的解决方法
  • 操作系统习题整理

    操作系统习题整理 从网上和课本上汇总整理了一些操作系统相关的习题 可以作为复习资料使用 1 操作系统是一种 B A 通用软件 B 系统软件 C 应用软件 D 软件包 2 操作系统是对 C 进行管理的软件 A 软件 B 硬件 C计算机资源 D
  • replaceAll()正则表达式替换内容

    String input camelCasing input input replaceAll A Z 1 System out println input 输出结果为 camel Casing
  • Pandas rank()函数排名的用法与解释

    之前搜关于pandas rank 函数的帖子 好几个大哥都是照搬书 当然也有一些大神直接一顿操作 截图 我结合了书还有自己的理解 希望没有错误 也希望和我一样的新手能看懂 谢谢 1 rank 默认情况下 rank 通过将平均排名分配到每个组
  • thinkphp6 入门(6)--中间件是什么 怎么用

    一 什么是中间件 当客户端发送请求至服务器时 HTTP请求会经过多个中间件 最后返回响应给客户端 中间件可以 在请求到达目标控制器或动作之前对请求进行操作 可以在响应离开目标控制器或动作之前对响应进行操作 二 中间件的作用 我们可以在不修改
  • 【Linux学习】vim编辑器的使用

    Linux环境中vim编辑器的使用 前言 一 vim是什么 二 vim的使用 1 vim的三种模式 1 1 命令模式 Command mode 1 2 输入模式 Insert mode 1 3 底线命令模式 Last line mode 2
  • xshell5中文破解版

    http www xue51 com soft 1442 html
  • 护网面试题

    1 有无安全设备的使用经验 2 了解过TOP10没有 1 SQL注入 2 失效的身份认证和会话管理 3 跨站脚本攻击XSS 4 直接引用不安全的对象 5 安全配置错误 6 敏感信息泄露 7 缺少功能级的访问控制 8 跨站请求伪造CSRF 9
  • 解决找不到mfc140.dll的问题

    mfc140 dll控件常规安装方法 仅供参考 如果在运行某软件或编译程序时提示缺少 找不到mfc140 dll等类似提示 您可将从脚本之家下载来的mfc140 dll拷贝到指定目录即可 一般是system系统目录或放到软件同级目录里面 或
  • Neo4j宣布下一代图数据平台Neo4j 5上线

    增强的可扩展性 敏捷性 高效率和性能优势使企业能够在任何环境中更快 更轻松地创建和部署智能应用程序 中国北京 2022 年 11 月 10日 图技术的领导者Neo4j 今天宣布了下一代可用于云端的图数据平台Neo4j 5上线 在传统数据库的
  • 不均匀硬币产生等概率/均匀硬币产生非等概率

    不均匀硬币产生等概率 已知随机数生成函数random 返回0的概率是60 返回1的概率是40 根据random 实现一个随机数函数f 使返回0和1的概率是50 连续投掷两次 第一次为0 第二次为1 返回0 第一次为1 第二次为0 返回1 这
  • Unicode汉字编码表

    1 Unicode编码表 Unicode只有一个字符集 中 日 韩的三种文字占用了Unicode中0x3000到0x9FFF的部分 Unicode目前普遍采用的是UCS 2 它用两个字节来编码一个字符 比如汉字 经 的编码是0x7ECF 注
  • 使用layui 写一段动态向form表单添加select下拉框,带删除功能

    可以参考如下示例代码 实现动态向表单中添加和删除 select 下拉框 div class layui container div