Jquery Javascript選択オプション要素の選択解除

Question

複数選択オプションから特定の数の値を選択したときに、複数選択オプション要素の最後に選択したオプションを選択解除しようとしています。ユーザーが3番目のオプションを選択しようとすると、選択したすべてのオプションの選択を解除するjqueryコードがあります。しかし、私は3番目のものだけを選択解除したい。

$(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のマルチドロップダウンのための配列を返します）。そうであれば、3番目の要素（prevOpts変数）を選択する前にドロップダウン値を前の値に設定します。そうでない場合は、prevOpts変数を選択した値に設定します。