Нужно сделать опцию переключения

Question

Я использую плагин select2 для пользовательского комбинированного списка и автозаполнения. Теперь мне нужно сделать переключение, как если бы все выбрать отключить, чтобы выбрать другой параметр, или если я выбрал другой вариант, нужно скрыть / очистить все параметры.

Основная тема

1. Если выбрать все опции, снимите другие опции

$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%'
});

.select2-container {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>




<select class="custom-select"  multiple="multiple">
  <option selected value="All">All</option>
  <option value="All">Kathmandu</option>
  <option value="All">Pokhara</option>
  <option value="All">Lalitpur</option>
</select>

n 2. Если выбран другой вариант, снимите все флажки

Теперь я попробовал. Пожалуйста, посмотрите код и помогите мне

Answer 1

Я заметил, что никто не ответил на ваш вопрос. К сожалению, эта функция, кажется, свободна в плагине. Но всегда есть работа вокруг.

Как избежать рекурсии

Для этого вам нужно вызвать событие change, чтобы обновить контейнер select2, а также, отслеживая событие change, изменить значение для select. Это вызвало бы рекурсию; Итак, я добавил переменную с именем flagAvoidRecursion, По сути, при первом вызове изменений нашего выбора мы установили флаг рекурсии true, Тогда мы игнорируем следующее .on("change") вызов и сброс нашего флага рекурсии.

Вам нужны уникальные значения

Чтобы заставить это работать, мы должны установить значение, означающее, что каждый объект в select должен иметь уникальное значение.

Попробуй:

flagAvoidRecursion = false;
previous = ["All"];
$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%'
}).on('change', function () {
  if (flagAvoidRecursion) {
    flagAvoidRecursion = false;
    return;
  }
  value = $(this).val();
  flagAvoidRecursion = true;
  if (value.length === $(".custom-select option").length -1) {
   $(this).val(["All"]);
  } else if (previous.indexOf("All") === -1 && previous.indexOf("All") !== -1) {
   $(this).val(["All"])
  } else if (value.indexOf("All") != -1 && value.length > 1) {
   temp = value;
   temp.splice(temp.indexOf("All"),1)
   $(this).val(temp);
  }
  previous = value;
  $(this).trigger("change");
});

.select2-container {
  max-width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>




<select class="custom-select"  multiple="multiple">
  <option selected value="All">All</option>
  <option value="Kathmandu">Kathmandu</option>
  <option value="Pokhara">Pokhara</option>
  <option value="Lalitpur">Lalitpur</option>
</select>