如果在select2

Question

我正在使用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>

Answer 1

您可以使用 select2：opening 事件并检查是否选择了第一项。如果选择了第一项，请使用preventDefault。 此处的工作代码：

jsfiddle.net/xpvt214o/475246/

Answer 2

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

PRIMARY_IP

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