Modal form does not reset the dropdown selection upon close or submit

[neesaa00]

So basically, my dselect dropdown was based populate with another dropdown. the value for the second dropdown based on first dropdown. The thing is, when i used this dselect dropdown, the dropdown doesn't reset the form and selection of dropdown upon close the modal or submit.

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

[jlcuilty]

Maybe this help you: function clearSelection(el){dselectClear(el.nextElementSibling.querySelector('button'), 'dselect-wrapper');}

  clearSelection(document.querySelector("#SostenmientoPublico")) //clear the values of the dropdown.