Use layui to write a dynamic section to add a select drop-down box to the form, with a delete function

You can refer to the following sample code to dynamically add and delete select drop-down boxes to the form:

<!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>

Run the sample code and you will see that there is a drop-down box and a button to add a drop-down box in a form. Click the button to dynamically add a drop-down box, and there is a delete button next to each drop-down box. Click the delete button to delete it. The corresponding drop-down box.

Use layui to write a dynamic section to add a select drop-down box to the form, with a delete function

Guess you like