I have a question. I'm very new in web development.

So basically, my dselect dropdown was based populate with another dropdown. the value for the second dropdown based on first dropdown. The thing is, the dropdown doesn't reset the form and selection of dropdown upon close the modal or submit button. I already use $('#stock_adjustment_form')[0].reset(); to reset my form but it's not working for the dropdown selection only.

I am using this as https://github.com/jarstone/dselect/ as my dynamic dropdown. I am using Boostrap 5. Any assistance would be appreciated.

<div id="stock_adjustmentModal" >
    <div >
        <form method="post" id="stock_adjustment_form">
            <div >
                <div >
                    <h4  id="modal_title">Add Stock Adjustment</h4>
                    <button type="button"  data-bs-dismiss="modal">&times;</button>
                </div>
                <div >
                    <span id="form_message"></span>

                    <div >
                        <label>Date<span >*</span></label>     
                        <div >
                            <div >
                                <span  id="basic-addon1"><i ></i></span>
                            </div>
                            <input type="text" name="stock_date" id="stock_date"  value="<?php echo $object->nowdt;?>" required/>
                        </div>     
                    </div>
                   
                    <div >
                        <label>Category</label>
                        <select name="stock_category" id="stock_category"  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 > 
                       <label>Item <span >*</span></label>
                            <select  name="stock_item" id="stock_item" required>
                            <option value="0">Select Item</option>
                            </select>
                     </div> 
                  
                    <div >
                        <label>Stock Adjustment Quantity</label>
                            <input type="number" step=0.01 name="stock_adjustment_qty" id="stock_adjustment_qty"  required/>
                    </div>
                    
                </div>
                <div >
                    <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"  value="Add" />
                    <button type="button"  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>

Below my server side code to display the second dropdown value

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"];
    }

    }
}

CodePudding user response：

Follow the same approach you do when setting the dropdown options. You need to clean that dropdown too on your sucess function:

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

CodePudding user response：

I have gone through the dSelect source and found a method called dSelectClear which will reset your dropdown list
I have created a helper function to ease the use
write the below function in your code:

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

Usage:

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

or for jQuery:

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