jay thakur jay thakur - 3 months ago 10
HTML Question

How to deselect values from multiselect option using jQuery?

I have a multiselect option. If i select Mahesh & Dilip both, I want to show a pop up message that you can not select both at a time. If I click Ok on pop up then I want to deselect ONLY these two. How to do this? Here is my code:

<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

You can select the options using $('option:contains(Mahesh), option:contains(Dilip)') and deselect them using .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>

Here's a cross-browser solution (works on 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>

Comments