layui を使用して動的セクションを作成し、削除機能を備えた選択ドロップダウンボックスをフォームに追加します。

次のサンプルコードを参照して、選択ドロップダウンボックスをフォームに動的に追加および削除できます。

<!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 を使用して動的セクションを作成し、削除機能を備えた選択ドロップダウン ボックスをフォームに追加します。

おすすめ

layui を使用して動的セクションを作成し、削除機能を備えた選択ドロップダウンボックスをフォームに追加します。