I have a question. I'm beginner in web development.

So basically, my dselect dropdown doesn't reset to the default value 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 and Boostrap 5.

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

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

    }
}

FOUND THE SOLUTION.

I need to add on this function on script.

function clearSelection(el){ //to clear dropdown dselect upon close or submit 
  dselectClear(el.nextElementSibling.querySelector('button'), 'dselect-wrapper');
}

and add this

clearSelection($('#stock_category')[0]);

in $('#add_stock_in').click(function(){ ... }

On the server side, stock_adjustment_exec.php I just add this, to make the second dropdown also reset to the default value.

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

    }
}

Instead of

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

I'm using below, to reset the 1st dselect dropdown.

clearSelection($('#stock_category')[0]);

That's all.

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

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("");