需要进行切换选项

Question

  

我使用select2插件进行自定义组合框和自动完成。现在我需要进行切换，如果所有选择禁用以选择其他选项或如果我选择其他选项需要隐藏/清除所有选项。

主题

1. 如果选择所有选项清除其他选项
＆＃13;
＆＃13;
$("select").select2({
  tags: "true",
  placeholder: "Select an option",
  allowClear: true,
  width: '100%'
});
＆＃13;
.select2-container {
  max-width: 400px;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;
<磷>氮  2.如果选择其他选项清除所有选项

现在我已经试过了。请看一下代码并帮助我

Answer 1

我注意到没有人回答你的问题。不幸的是，这个功能似乎在插件中是空的。但始终是一种解决方法。

避免递归

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

您需要唯一值

为了使其工作，我们必须设置值，这意味着select中的每个对象都应具有唯一值。

试一试：

＆＃13;

＆＃13;

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");
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;