Hi, thank you very much for this amazing JS! The problem I'm facing is when a SELECT has an empty OPTION (e.g. "Choose from the list...") where the value is an empty string, it doesn't appear in the choices. So it is impossible to remove a selection once 1 choice has been made. If the value is "0" it appears, but obviously the script receiving the form thinks there is something (0 is not ""). Is there a way to let appear the options with empty value ?

THANK YOU!

I had the requirement to not only search the texts of the options, but also the texts of the headers. If a header text matches, all options under that header are displayed as result.

⚠️The current solution i came up with has a problem in conjunction with creatable: If you need to add an option that has exactly the same name as an existing header, this will not be possible anymore (at least if the matching header contains options).

For eg.

<option value="" disabled>Championship (England)</option>
<option value="" disabled>No Teams in This League</option>

I know disabled options should not be searchable, however, they should be viewable when you initially click the select box.

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>

The data coming from the server side is not loaded into the dropdown list when we add dselect (If I don't use the dselect add-on, the data reload works).

The code HTML:

<label for="states" class="control-label">Country</label>
<select name="dc_countryID" id="country" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
<option value="0">USA</option>
<option value="0">Brazil</option>
</select>

<label for="states" class="control-label">State</label>
<select name="dc_stateID" id="states" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
</select>


<label for="cities" class="control-label">City</label>
<select name="dc_cityID" id="cities" class="form-select rounded-0 selectlist">
<option value="0">Select</option>
</select>

Javascript code: (#states and #cities select tag ID)

let selectList = document.querySelectorAll('.selectlist');
if (selectList != null) {
  for (const sl of selectList) {
	  dselect(sl, { search: true });
  }
}

$(document).ready(function(){

$("#country").on("change",function() {
var countryID = $(this).val();

$.ajax({
  url: "action_ajax.php",
  type: "POST",
  cache: false,
  data: {countryID:countryID},
  success: function(data) {
  console.log(data);
  $("#states").html(data);
},
  error: function (jqXHR, textStatus, errorThrown) { 
  errorFunction(); 
}

});
});

$("#states").on("change",function() {
var statesID = $(this).val();

$.ajax({
  url: "action_ajax.php",
  type: "POST",
  cache: false,
  data: {statesID:statesID},
  success: function(data) {
  console.log(data);
  $("#cities").html(data);
},
  error: function (jqXHR, textStatus, errorThrown) { 
  errorFunction(); 
}
});
});
});

I noticed that when i put a disabled flag on an option during a foreach loop, it was not carrying the flag over to show that the option was disabled.

So I went into the file and added in a disabledvalue check to check for the disabled flag, if it has the flag, add disableitem (with disabled='true') to the item, otherwise, ignore it.

I figure this may help other people who need to disable certain items for a certain reason.