Utilisez layui pour écrire une section dynamique pour ajouter une liste déroulante de sélection au formulaire, avec une fonction de suppression

Vous pouvez vous référer à l'exemple de code suivant pour ajouter et supprimer dynamiquement des listes déroulantes de sélection au formulaire :

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

Exécutez l'exemple de code et vous verrez qu'il y a une zone déroulante et un bouton pour ajouter une zone déroulante dans un formulaire. Cliquez sur le bouton pour ajouter dynamiquement une zone déroulante, et il y a un bouton Supprimer à côté de Chaque liste déroulante. Cliquez sur le bouton Supprimer pour la supprimer. La liste déroulante correspondante.

Utilisez layui pour écrire une section dynamique pour ajouter une liste déroulante de sélection au formulaire, avec une fonction de suppression

Je suppose que tu aimes