如何使用jQuery从multiselect选项中取消选择值？

jay thakur 发表于 Dev

杰伊·塔库尔

我有一个多选选项。如果我同时选择“ Mahesh＆Dilip”和“ Mahesh＆Dilip”，我想显示一条弹出消息，提示您一次不能同时选择两者。如果在弹出窗口上单击“确定”，则仅要取消选择这两个。这该怎么做？这是我的代码：

<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

    }
  }

});

MichałPerłakowski

您可以使用选择选项，$('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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。