javascript - 如果使用 select2 选择了特定值,则不允许选择其他选项

标签 javascript jquery jquery-select2

如您所见,我有一个带有 select2(多个)选择功能的选择框,其中有一些选项,例如

<option value="All"> All </option>
<option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb9f8e989fab8e868a8287c5888486" rel="noreferrer noopener nofollow">[email protected]</a>"> User 1</option>
<option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd89988e89cfbd98909c9491d39e9290" rel="noreferrer noopener nofollow">[email protected]</a>"> User 2 </option>
<option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="de8abbadaaed9eacb3bfb7b2f0bdb1b3" rel="noreferrer noopener nofollow">[email protected]</a>"> User 3 </option>

是否有可能,如果我从选择框中选择选项All,那么选择框不允许我从给定选项中选择其他选项,除非我将其删除。

我想限制用户选择“全部”或从选项中选择多个用户。

我准备使用 jQuery 或 javascript 来实现这一点。

最佳答案

<强> Working fiddle

当选项All出现时,您可以将select的值设置为All:

$("#my-select").select2();

$("#my-select").on('change', function(){
    var selected = $(this).val();

    if(selected != null)
    {
      if(selected.indexOf('All')>=0){
          $(this).val('All').select2();
      }
    }
})

希望这有帮助。

$("#my-select").select2();

$("#my-select").on('change', function(){
  var selected = $(this).val();

  if(selected != null)
  {
    if(selected.indexOf('All')>=0){
      $(this).val('All').select2();
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>

<select multiple id="my-select" style="width:300px">
  <option value="All"> All </option>
  <option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="374352444377525a565e5b1954585a" rel="noreferrer noopener nofollow">[email protected]</a>"> User 1</option>
  <option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f286978186c0b2979f939b9edc919d9f" rel="noreferrer noopener nofollow">[email protected]</a>"> User 2 </option>
  <option value="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c397a6b0b7f083b1aea2aaafeda0acae" rel="noreferrer noopener nofollow">[email protected]</a>"> User 3 </option>
</select>

关于javascript - 如果使用 select2 选择了特定值,则不允许选择其他选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40503680/

相关文章:

javascript - 将 1 个数据集加载到选择元素中并过滤搜索另一个端点

php - 如何从 Select2 Widget Yii2 将多个值保存到数据库

javascript - 将参数从指令传递到 Controller 时遇到问题

javascript - react 未找到组件总是呈现

javascript - 使用谷歌地图切换类别标记

css - 如何更改 select2 标签颜色的 css?

javascript - JS : Image onLoad resize. ..怎么办?

javascript - AngularJS 中可重用的弹出解决方案

jquery - 我可以将viewbag值传递给mvc2中的jQuery吗

javascript - 在 IE8 中,并非每次都能获取对嵌套框架对象的引用。添加alert()时它会起作用!