模态表单在关闭或提交时不会重置下拉选择

Question

我有个问题。 我是 web 开发的新手。

所以基本上，我的 dselect 下拉列表是基于填充另一个下拉列表。 基于第一个下拉列表的第二个下拉列表的值。 问题是，关闭模式或提交按钮时，下拉菜单不会重置表单和下拉菜单的选择。 我已经使用 $('#stock_adjustment_form')[0].reset(); 重置我的表单，但它不适用于下拉选择。

我将其用作https://github.com/jarstone/dselect/作为我的动态下拉列表。 我正在使用 Boostrap 5。任何帮助将不胜感激。

<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>Date<span class="text-danger">*</span></label>     
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="basic-addon1"><i class="fa fa-calendar"></i></span>
                            </div>
                            <input type="text" name="stock_date" id="stock_date" class="form-control" value="<?php echo $object->nowdt;?>" required/>
                        </div>     
                    </div>
                   
                    <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 class="form-group">
                        <label>Stock Adjustment Quantity</label>
                            <input type="number" step=0.01 name="stock_adjustment_qty" id="stock_adjustment_qty" class="form-control" required/>
                    </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
})

dselect(document.querySelector('#stock_item'),{
  search: 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"];
    }

    }
}

Answer 1

遵循与设置下拉选项时相同的方法。 您还需要在成功 function 上清除该下拉列表：

$("#stock_item").html("");

Answer 2

我浏览了dSelect源并找到了一个名为dSelectClear的方法，它将重置您的下拉列表
我创建了一个助手 function 以方便使用
在您的代码中写入以下 function ：

function clearSelection(el){
  dselectClear(el.nextElementSibling.querySelector('button'), 'dselect-wrapper');
}

用法：

clearSelection(document.querySelector('#stock_adjustment_form'))

或者对于 jQuery：

clearSelection($('#stock_adjustment_form')[0])