需要制作切换选项

Question

I am using select2 plugin for custom combobox and auto complete. Now i need to make toggle like if all select disable to select other option or if i select other option need to hide/clear all option.

主旋律

如果select所有选项清除其他选项

$("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.如果select其他选项清除所有选项

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

Answer 1

我注意到没有人回答你的问题。不幸的是，这个功能在插件中似乎是空缺的。但总有变通办法。

避免递归

为此，您需要调用更改事件来更新 select2 容器，同时还要监视更改事件更改 select 的值。那会导致递归；所以，我添加了一个名为 flagAvoidRecursion 的变量。基本上，在 select 上第一次调用更改时，我们将递归标志设置为 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>

需要制作切换选项

Need to make toggle option

javascript

css

jquery

jquery-select2

select2

避免递归

您需要唯一值

试一试：