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

可以参考如下示例代码，实现动态向表单中添加和删除 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>

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

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

猜你喜欢