FВыберите Очистить выделение

Как очистить раскрывающийся список fSelect с множественным выбором в событии щелчка. Вот пример. Нажав на кнопку «Очистить», должно быть удалено все выбранное значение.

(function($) {
    $(function() {
        $('.my-select-box').fSelect();
        $('#ClearSelect').click(function(){
           $("#fselectMulti option:selected").removeAttr("selected");
        })
    });
    
})(jQuery);
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel = "stylesheet"/>
<script src = "https://facetwp.com/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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
5 318
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы можете очистить, перебрав опцию и отменив выбор, например:

$(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.info($('#fselectMulti').val());
    $('.fs-label').html('Select some options');
  })
  $('#CheckSelect').click(function(){
    console.info($('#fselectMulti').val());
  })
});
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://facetwp.com/wp-content/plugins/facetwp/assets/vendor/fSelect/fSelect.css" rel = "stylesheet" />
<script src = "https://facetwp.com/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>

Попробуй поподробнее описать.

Zakaria Acharki 11.09.2018 12:16

После кнопки очистки множественный выбор не имеет ни одного выбранного параметра, а в журналах указано, что оно все еще выбрано.

Gautam Parmar 11.09.2018 12:19

Я знаю, что это уже решило проблему, но для улучшения вы можете снова установить исходный текст на $('.fs-label'), получив доступ к его настройкам таким образом $('#fselectMulti').data('fSelect').settings.placeholder

Marco 21.09.2018 21:28

Для будущих ссылок: Используя вилка из fSelect, который имеет лучшую функцию перезагрузки, выполнение следующих действий может сбросить значения и выбранные элементы:

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

})(jQuery);

Другие вопросы по теме