如果第一个选项已被选中,则从第二个选择中删除该选项


remove option from second select if already selected first

我正在尝试制作一个体育博彩页面。用户需要选择哪两支球队互相比赛。
所以,我有两个select,我需要从第二个select中移除一个option,因为一个团队不能自己玩。
以下是select:

    <select class="form-control" name="team1">
        <option value="Steaua Bucuresti">Steaua Bucuresti</option>
        <option value="CSU Craiova">CSU Craiova</option>
        <option value="FC Viitorul">FC Viitorul</option>
        <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
        <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
    </select>
    <select class="form-control" name="team2">
        <option value="Steaua Bucuresti">Steaua Bucuresti</option>
        <option value="CSU Craiova">CSU Craiova</option>
        <option value="FC Viitorul">FC Viitorul</option>
        <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
        <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
    </select>

这是为您提供的Jquery解决方案:

$('select[name=team2]').on('change', function() {
   var self = this;
   $('select[name=team1]').find('option').prop('disabled', function() {
       return this.value == self.value
   });
});
$('select[name=team1]').on('change', function() {
  var self = this;
  $('select[name=team2]').find('option').prop('disabled', function() {
      return this.value == self.value
  });
});
<select class="form-control" name="team1">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2">
  <option value="">Please select a team...</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

对于后代,您可以在没有库和额外代码的情况下完成此操作。此解决方案还使用更少的函数调用,并使用直接属性访问而不是选择器,因此它应该更有效。

策略是禁用在另一个选择中选择的任何选项。同时,它启用了所有其他选项。
禁用选项可能在旧的浏览器中不起作用-您可能必须删除并替换它们。

window.onload = function(){
  document.forms[0].team1.addEventListener('change', function(){
    [].forEach.call(this.form.team2.options, function(opt) {
      opt.disabled = opt.index == this.selectedIndex && opt.index != 0;
    }, this);
  }, false);
  
  document.forms[0].team2.addEventListener('change', function(){
    [].forEach.call(this.form.team1.options, function(opt) {
      opt.disabled = opt.index == this.selectedIndex && opt.index != 0;
    }, this);
  }, false);
};
<form>
  <select class="form-control" name="team1">
    <option>Select one&hellip;
    <option value="Steaua Bucuresti">Steaua Bucuresti</option>
    <option value="CSU Craiova">CSU Craiova</option>
    <option value="FC Viitorul">FC Viitorul</option>
    <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
    <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
  </select>
  <select class="form-control" name="team2">
    <option>Select one&hellip;
    <option value="Steaua Bucuresti">Steaua Bucuresti</option>
    <option value="CSU Craiova">CSU Craiova</option>
    <option value="FC Viitorul">FC Viitorul</option>
    <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
    <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
  </select>
</form>

上述解决方案还允许用户在两个选择中同时选择第一个选项(' select one…')

您可以在jQuery中轻松地做到这一点

$('.form-control[name=team1]').on('change', function(e){
   var thisVal = $(this).val();
   $('.form-control[name=team2] option').each(function(){
      if(thisVal == $(this).attr('value')){
         $(this).attr('disabled', 'disabled');
       }else{
         $(this).removeAttr('disabled');
       }
   })
})

检查这个https://jsfiddle.net/uLqpfqr7/

试试这个例子:你可以同时处理选择框

$(document).ready(function(){
 $("#team1").change(function(){
   var anotherTeam = $("#team2").val();
   var team = $(this).val();
   if(team !='' && team==anotherTeam){
     alert("This team already selected.");
     $('option:selected',this).removeAttr('selected');
     $("option:first",this).attr('selected','selected');
   }
 });
     
 $("#team2").change(function(){
   var anotherTeam = $("#team1").val();
   var team = $(this).val();
   if(team !='' && team==anotherTeam){
     alert("This team already selected.");
     $('option:selected',this).removeAttr('selected');
     $("option:first",this).attr('selected','selected');
     
   }
 });
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="team1" id="team1">
  <option value="">Select One</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>
<select class="form-control" name="team2" id="team2">
  <option value="">Select One</option>
  <option value="Steaua Bucuresti">Steaua Bucuresti</option>
  <option value="CSU Craiova">CSU Craiova</option>
  <option value="FC Viitorul">FC Viitorul</option>
  <option value="Dinamo Bucuresti">Dinamo Bucuresti</option>
  <option value="Pandurii Tg Jiu">Pandurii Tg Jiu</option>
</select>

相关文章: