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變量設置爲選定的值。