jQueryを使用して複数選択オプションから値を選択解除するにはどうすればよいですか？

Question

私は複数の選択肢があります。私がMahesh & Dilipを選択した場合は、一度に選択することができないポップアップメッセージを表示したい。私がをクリックしたときにポップアップでが表示されたら、はこの2つのみを選択解除する。これを行う方法？ここに私のコードは次のとおりです。

<select multiple="" name="playerNames" id="playerNames" class=""> 
    <option value="">-- Select --</option> 
    <option value="4">Rakesh</option> 
    <option value="5">Suresh</option> 
    <option value="2">Mahesh</option> 
    <option value="6">Dilip</option> 
    <option value="1">Ramesh</option> 
    <option value="3">Dinesh</option> 
</select> 

<script type="text/javascript"> 
    $('#playerNames').on('change',function(){ 
    var selected = $('#playerNames:selected').map(function(){return $(this).val();}).get(); 
    alert(selected.length); 
    if(jQuery.inArray("Mahesh", selected) !== -1){ 
    var maheshSelected = true; 
    } 

    if(jQuery.inArray("Dilip", selected) !== -1){ 
     var dilipSelected = true; 
    } 

    if(maheshSelected == true && dilipSelected == true){ 
     var alertMessage = "You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip."; 
    alert(alertMessage); 
    if (confirm(alertMessage)) { 

    //code to deselect both 

    } 
    } 

}); 

Answer 1

あなたは$('option:contains(Mahesh), option:contains(Dilip)')を使用してオプションを選択して.prop('selected', false)を使用してそれらの選択を解除することができます

$('#playerNames').on('change', function(){ 
 
    const selected = $('#playerNames :selected').map(function() {return $(this).text()}).get() 
 
    if (selected.includes('Mahesh') && selected.includes('Dilip')) { 
 
    alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.') 
 
    $('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="" name="playerNames" id="playerNames" class=""> 
 
    <option value="">-- Select --</option> 
 
    <option value="4">Rakesh</option> 
 
    <option value="5">Suresh</option> 
 
    <option value="2">Mahesh</option> 
 
    <option value="6">Dilip</option> 
 
    <option value="1">Ramesh</option> 
 
    <option value="3">Dinesh</option> 
 
</select>

ここでクロスブラウザのソリューションです（作品Internet Explorer 9以降）：

$('#playerNames').on('change', function(){ 
 
    var selected = $('#playerNames :selected').map(function() {return $(this).text()}).get() 
 
    if (selected.indexOf('Mahesh') > -1 && selected.indexOf('Dilip') > -1) { 
 
    alert('You cannot choose Mahesh + Dilip. Please select either Mahesh or Dilip.') 
 
    $('option:contains(Mahesh), option:contains(Dilip)').prop('selected', false) 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select multiple="" name="playerNames" id="playerNames" class=""> 
 
    <option value="">-- Select --</option> 
 
    <option value="4">Rakesh</option> 
 
    <option value="5">Suresh</option> 
 
    <option value="2">Mahesh</option> 
 
    <option value="6">Dilip</option> 
 
    <option value="1">Ramesh</option> 
 
    <option value="3">Dinesh</option> 
 
</select>