Bootstrap 多选搜索清除按钮单击事件不起作用

Question

I am using bootstrap multi-selector with search enabled option.

I am trying to unselect all selected items on click of X button. But i am not able to handle click event for this button.

Please help or suggest a better way to do this.

Here is sample code:

<select id="multiselect-users" name="users[]" multiple="multiple">
    <option value="1">User1</option>
    <option value="2">User2</option>
</select>

<script type="text/javascript">
 $('#multiselect-users').multiselect({
    enableFiltering: true
 });
  // .multiselect-clear-filter is X button class. This button is part of bootstrape-multiselect if you enable filter
 $(document).on('click', '.multiselect-clear-filter', function(){

    // not working :(
    alert('test');
 });
</script>

I want to unselect all selected items on click of this X button.

Answer 1

What you a really expecting is that when you click on a select option an alert is displayed.

But the name of this event is not called 'click' is called 'changed':

 $(document).on('change', '#multiselect-users', function(){ // woking:) alert('test'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="multiselect-users" name="users[]" multiple="multiple"> <option value="1">User1</option> <option value="2">User2</option> </select>

Also, you should add this event to the select tag not to .multiselect-clear-filter .

I have to say something about the:

 $('#multiselect-users').multiselect({
    enableFiltering: true
 });

part. And is that change event doesn't work when this is enabled. But I think maybe this function is from another library.

Hope this helps!

Answer 2

Hi You can try this option also

 $('#multiselect-users').multiselect({
        includeFilterClearBtn:true
 });

Answer 3

Try following code:

$('.multiselect-clear-filter').click(function () {
    $('#myDropDown option:selected').each(function () {
        $(this).prop('selected', false);
    })
    $('#myDropDown').multiselect('refresh');
});

NOTE: Do not include this inside $(document).Ready()