需要制作切换选项

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

我注意到没有人回答您的问题。不幸的是，插件中似乎没有此功能。但是总是可以解决的。

避免递归

为此，您需要调用更改事件来更新 select2 容器，同时还要监视更改事件更改选择的值。这会导致递归；所以，我添加了一个名为flagAvoidRecursion 的变量。基本上在我们选择的第一次更改调用中，我们将递归标志设置为true。然后我们忽略下面的.on("change") 调用并重置我们的递归标志。

你需要独特的价值观

为了让它工作，我们必须设置值，这意味着选择中的每个对象都应该有一个唯一的值。

试一试：

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>