jQuery를 사용하여 다중 선택 옵션에서 값을 선택 취소하는 방법은 무엇입니까?

Question

다중 선택 옵션이 있습니다. Mahesh & Dilip 두 가지를 모두 선택한 경우 한 번에 두 가지를 선택할 수 없다는 팝업 메시지를 표시하려고합니다. 팝업 창이 나타나면 Ok을 클릭하면 이 두 개만 선택 취소됩니다.. 이 작업을 수행하는 방법? 당신은 $('option:contains(Mahesh), option:contains(Dilip)')를 사용하여 옵션을 선택하고 .prop('selected', false)를 사용하여 선택을 취소 할 수 있습니다

<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

: 여기

$('#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 이상) :

,210

$('#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>