如果在 select2 中选择了第一个选项，如何限制选择答案

【问题标题】：how to limit selection if first option is chosen in select2如果在 select2 中选择了第一个选项，如何限制选择
【发布时间】：2019-01-01 04:59:28
【问题描述】：

我正在使用Select2，并希望允许用户选择多个选项，但如果选择了第一个选项，则不允许。

第一个选项是“稍后选择”，如果选择此选项，则不应选择其他项目。但是如果选择了其他选项，应该可以选择多个。

我可以轻松实现选择多项，但是如果选择第一个选项，如何限制进一步选择？

$('#example').select2();

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

<select id="example" multiple="multiple" style="width: 300px">
    <option value="-1">Select later</option>
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

您可以使用 select2:opening 事件检查第一项是否被选中。如果选择了第一项，则使用 preventDefault。这里的工作代码：

jsfiddle.net/xpvt214o/475246/

【讨论】：

【解决方案2】：

跟踪更改并相应地更新值。

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

<select id="example" multiple="multiple" style="width: 300px">
    <option value="-1">Select later</option>
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

<script>
var $example = $('#example');
$example.select2();
$example.on("change", function() {
  var vals = $(this).val();
  if (vals.length > 1 && vals.includes("-1")) {
    $(this).val("-1");
    $(this).trigger('change');
  }
})
</script>

【讨论】：

【解决方案3】：

这样的事情就可以了。如果选择了“稍后选择” - 其余项目将被清除。

$(function() {

$('#example').select2();

   $('#example').on('select2:select', function(){
    
   // if($(this).val()==null){$(this).trigger('change');}
    
    if( $(this).val().indexOf('-1')!=-1 && $(this).val().length>1){
      
     $(this).val('-1').trigger('change');
    
      }
   
   });
});

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


<select id="example" multiple="multiple" style="width: 300px">
    <option value="-1">Select later</option>
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

【讨论】：