How to clear fSelect multi-select drop-down in click event, Here is an example By Clicking on Clear button It should remove all Selected value.

(function($) {
    $(function() {
        $('.my-select-box').fSelect();
        $('#ClearSelect').click(function(){
           $("#fselectMulti option:selected").removeAttr("selected");
        })
    });
    
})(jQuery);

<script src=".1.1/jquery.min.js"></script>
<link href=".css" rel="stylesheet"/>
<script src=".js"></script>
<select id="fselectMulti" class="my-select-box" multiple="multiple">
    <optgroup label="Northeast">
        <option selected value="me">Maine</option>
        <option selected value="ny">New York</option>
        <option value="nj">New Jersey</option>
        <option value="vt">Vermont</option>
    </optgroup>
    <optgroup label="Southwest">
        <option value="az">Arizona</option>
        <option selected value="nm">New Mexico</option>
        <option value="ca">California</option>
        <option value="nv">Nevada</option>
    </optgroup>
</select>

<button id="ClearSelect">Clear</button>

How to clear fSelect multi-select drop-down in click event, Here is an example By Clicking on Clear button It should remove all Selected value.

(function($) {
    $(function() {
        $('.my-select-box').fSelect();
        $('#ClearSelect').click(function(){
           $("#fselectMulti option:selected").removeAttr("selected");
        })
    });
    
})(jQuery);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://facetwp./wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet"/>
<script src="https://facetwp./wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<select id="fselectMulti" class="my-select-box" multiple="multiple">
    <optgroup label="Northeast">
        <option selected value="me">Maine</option>
        <option selected value="ny">New York</option>
        <option value="nj">New Jersey</option>
        <option value="vt">Vermont</option>
    </optgroup>
    <optgroup label="Southwest">
        <option value="az">Arizona</option>
        <option selected value="nm">New Mexico</option>
        <option value="ca">California</option>
        <option value="nv">Nevada</option>
    </optgroup>
</select>

<button id="ClearSelect">Clear</button>

• javascript
• jquery
• multi-select
• fselect

Share Improve this question Follow edited Sep 11, 2018 at 10:25 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Sep 10, 2018 at 17:23 Gautam ParmarGautam Parmar 4851010 silver badges2121 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could clear by looping through the option and unselect them like :

$(function() {
  $('.my-select-box').fSelect();

  $('#ClearSelect').click(function() {
    $('#fselectMulti option:selected').removeAttr('selected');

    $('.my-select-box').prev(".fs-dropdown").find(".fs-options .fs-option").each(function() {
      $(this).removeClass('selected', false);
    });

    console.log($('#fselectMulti').val());
    $('.fs-label').html('Select some options');
  })
  $('#CheckSelect').click(function(){
    console.log($('#fselectMulti').val());
  })
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://facetwp./wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel="stylesheet" />
<script src="https://facetwp./wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.js"></script>
<select id="fselectMulti" class="my-select-box" multiple="multiple">
  <optgroup label="Northeast">
    <option selected value="me">Maine</option>
    <option selected value="ny">New York</option>
    <option value="nj">New Jersey</option>
    <option value="vt">Vermont</option>
  </optgroup>
  <optgroup label="Southwest">
    <option value="az">Arizona</option>
    <option selected value="nm">New Mexico</option>
    <option value="ca">California</option>
    <option value="nv">Nevada</option>
  </optgroup>
</select>

<button id="ClearSelect">Clear</button>
<button id="CheckSelect">Check Array</button>

For future references: Using a fork of fSelect which has a better reload function, doing the following can reset the values and the selected items:

(function($) {
    $(function() {
        $('.my-select-box').fSelect();
        $('#ClearSelect').click(function(){
            $("#fselectMulti option").prop("selected", false);
            $('.my-select-box').fSelect('reload');
        })
    });

})(jQuery);