jquery Javascript取消选择选项元素

Question

我想取消选择多选择选项元素的最后选定的选项，当用户从多选择选项中选择一定数量的值。这里是我的jQuery代码，当用户尝试选择第三个选项时，取消选择所有选定的选项。但我只想取消第三个选择。

$(document).ready(function() { 
 
    $("select#connection_profiles").change(function() { 
 
    if ($("select#connection_profiles option:selected").length > 2) { 
 
     $("#connection_profiles").val([]); 
 
     alert('You can only select a max of 2 connection profile.'); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class="input-group"><span class="input-group-addon">Server</span> 
 
    <select class="form-control" multiple name="connection_profiles[]" id="connection_profiles"> 
 
    <option value=''>Please select max of 2 connection profile</option>   
 
    <option value='10'>Rackware Cloud Server</option> 
 
    <option value='8'>Rackspace Cloud Server</option> 
 
    <option value='9'>Mitel MiCloud Cloud Server</option> 
 
    <option value='7'>Carbonite Cloud Server</option> 
 
    <option value='6'>Steam Gaming Cloud Server</option> 
 
    <option value='5'>Microsoft Exchange Cloud Server</option> 
 
    </select> 
 
    </div> 
 
</div>

Answer 1

var prevOpts = []; 
 
$("select#connection_profiles").change(function() { 
 
    var val = $(this).val(); 
 
    if (val.length > 2) { 
 
    $(this).val(prevOpts); 
 
    alert('You can only select a max of 2 connection profile.'); 
 
    } else { 
 
    prevOpts = val; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group"> 
 
    <div class="input-group"> 
 
    <span class="input-group-addon">Server</span> 
 
    <select class="form-control" multiple name="connection_profiles[]" id="connection_profiles"> 
 
     <option value=''>Please select max of 2 connection profile</option> 
 
     <option value='10'>Rackware Cloud Server</option> 
 
     <option value='8'>Rackspace Cloud Server</option> 
 
     <option value='9'>Mitel MiCloud Cloud Server</option> 
 
     <option value='7'>Carbonite Cloud Server</option> 
 
     <option value='6'>Steam Gaming Cloud Server</option> 
 
     <option value='5'>Microsoft Exchange Cloud Server</option> 
 
    </select> 
 
    </div> 
 
</div>

每当下拉变化，代码检查是否它的值有2个以上元件（jQuery的返回多下拉菜单的阵列）。如果是这样，它会在您选择第三个元素（prevOpts变量）之前将下拉值设置为之前的值，否则它会将prevOpts变量设置为选定的值。