Bootstrap 5模态框中dselect下拉框关闭/提交后无法重置问题解决

我是Web开发新手，使用dselect动态下拉框与Bootstrap 5搭建模态框表单时，遇到以下问题：关闭模态框或提交表单后，dselect下拉框无法重置为默认值。已使用$('#stock_adjustment_form')[0].reset();重置表单，但仅下拉框无效果。

相关代码 #

前端代码 #

<div id="stock_adjustmentModal" class="modal fade">
    <div class="modal-dialog">
        <form method="post" id="stock_adjustment_form">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal_title">Add Stock Adjustment</h4>
                    <button type="button" class="close" data-bs-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <span id="form_message"></span>
                   
                    <div class="form-group">
                        <label>Category</label>
                        <select name="stock_category" id="stock_category" class="form-select" onchange="getId(this.value)" required>
                            <option value="0">Select Category</option>
                            <?php
                            $object->query = "SELECT * FROM tbl_category 
                                              WHERE category_flag = 0 
                                              ORDER BY category_id ASC";

                            $result = $object->get_result();

                            foreach($result as $row)
                            {
                                echo '
                                <option value="'.$row["category_id"].'">'.$row["category_name"].'</option>
                                ';
                            }
                            ?>
                        </select>
                    </div>

                    <div class="form-group"> 
                       <label>Item <span class="text-danger">*</span></label>
                            <select class="form-select" name="stock_item" id="stock_item" required>
                            <option value="0">Select Item</option>
                            </select>
                     </div> 
                    
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="hidden_id" id="hidden_id" />
                    <input type="hidden" name="action" id="action" value="Add" />
                    <input type="submit" name="submit" id="submit_button" class="btn btn-success" value="Add" />
                    <button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </form>
    </div>
</div>

<link rel="stylesheet" href="https://unpkg.com/@jarstone/dselect/dist/css/dselect.css">
<link href="../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
<script src="https://unpkg.com/@jarstone/dselect/dist/js/dselect.js"></script>

<script>

$(document).ready(function(){

    var dataTable = $('#tbl_stock_adjustment').DataTable({
        "processing" : true,
        "serverSide" : true,
        "order" : [],
        "ajax" : {
            url:"stock_adjustment_exec.php",
            type:"POST",
            data:{action:'fetch'}
        },
        "columnDefs":[{
            "targets":'_all',
            "orderable":false,
        }],
    });

        $('#stock_date').datepicker({
            format: "yyyy-mm-dd",
            autoclose: true
        });

        $('#add_stock_adjustment').click(function(){
        
        $('#stock_adjustment_form')[0].reset();

        $('#stock_adjustment_form').parsley().reset();

        $('#modal_title').text('Add Stock Adjustment');

        $('#action').val('Add');

        $('#submit_button').val('Add');

        $('#stock_adjustmentModal').modal('show');

        $('#form_message').html('');

    }); 

    $('#stock_adjustment_form').parsley();

    $('#stock_adjustment_form').on('submit', function(event){
        event.preventDefault();
        if($('#stock_adjustment_form').parsley().isValid())
        {       
            $.ajax({
                url:"stock_adjustment_exec.php",
                method:"POST",
                data:$(this).serialize(),
                dataType:'json',
                beforeSend:function()
                {
                    $('#submit_button').attr('disabled', 'disabled');
                    $('#submit_button').val('wait...');
                },
                success:function(data)
                {
                    $('#submit_button').attr('disabled', false);
                    if(data.error != '')
                    {
                        $('#form_message').html(data.error);
                        $('#submit_button').val('Add');
                    }
                    else
                    {
                        $('#stock_adjustmentModal').modal('hide');
                        $('#message').html(data.success);
                    
                        dataTable.ajax.reload();

                        setTimeout(function(){

                            $('#message').html('');

                        }, 5000);
                    }
                }
            })
        }
    });
});

dselect(document.querySelector('#stock_category'),{
  search: true,
//  clearable: true,
})

dselect(document.querySelector('#stock_item'),{
  search: true,
//  clearable: true,
})
 
function getId(val){
        var item_id = +val;
        $.ajax({type:"POST",url: "stock_adjustment_exec.php",data:{item_id:item_id, action:'dditem'},success:function(data){
            
 $("#stock_item").html(data);

 dselect(document.querySelector('#stock_item'));

        }});} 
        
</script>

后端渲染第二个下拉框的代码 #

if($_POST["action"] == 'dditem')
    {
        $object->query = "SELECT * FROM tbl_item
                           WHERE item_category = '".$_POST["item_id"]."'";

        $result = $object->get_result();

        foreach($result as $row)
    {

        echo '<option value="'.$row["item_id"].'">'.$row["item_name"].'</option>';
        $itemsid = $row["item_id"];
    }

    }
}

解决方案 #

1. 前端新增dselect清除函数 #

在脚本中添加专门用于重置dselect下拉框的函数：

function clearSelection(el){ // 关闭模态框或提交后清除dselect下拉框
  dselectClear(el.nextElementSibling.querySelector('button'), 'dselect-wrapper');
}

在打开模态框的点击事件中调用该函数，重置第一个下拉框：

$('#add_stock_adjustment').click(function(){
    $('#stock_adjustment_form')[0].reset();
    $('#stock_adjustment_form').parsley().reset();
    $('#modal_title').text('Add Stock Adjustment');
    $('#action').val('Add');
    $('#submit_button').val('Add');
    // 新增重置dselect的调用
    clearSelection($('#stock_category')[0]);
    $('#stock_adjustmentModal').modal('show');
    $('#form_message').html('');
});

2. 后端修改动态下拉框渲染逻辑 #

修改stock_adjustment_exec.php中的代码，当分类ID为0时，返回默认的"Select Item"选项，确保第二个下拉框也能重置：

if($_POST["action"] == 'dditem')
{
    if($_POST["item_id"] != 0)
    { 
        $object->query = "SELECT * FROM tbl_item
                           WHERE item_category = '".$_POST["item_id"]."'";

        $result = $object->get_result();

        foreach($result as $row)
        {
            echo '<option value="'.$row["item_id"].'">'.$row["item_name"].'</option>';
            $itemsid = $row["item_id"];
        }
    } else {
        echo '<option value="0">Select Item</option>';
    }
}

通过以上两步操作，即可实现dselect下拉框在关闭模态框或提交表单后重置为默认值的效果。

内容的提问来源于stack exchange，提问作者Neesz