удалить вариант со второго выбора, если он уже выбран первым

Question

Я стараюсь сделать страницу со ставкой на спорт. Пользователь должен выбрать, какая команда играет с другой. Поэтому у меня есть два выбора, и мне нужно удалить одну и ту же опцию со второго выбора, потому что одна команда не может играть сама с собой. Вот выбирает:

<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> 

Answer 1

Вот решение 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>

Answer 2

Вы можете легко сделать это в 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/

Answer 3

Попробуйте этот пример: можно обрабатывать как поле выбора,

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

Answer 4

Для потомков, вы можете сделать это без библиотеки и без дополнительного кода. Это также использует меньше вызовов функций и прямого доступа к свойствам, а не селекторов, поэтому должно быть более эффективным.

Стратегия состоит в том, чтобы отключить параметр в одном выборе, когда он выбран в другом, и включить все остальные параметры. В старых браузерах параметры отключения могут не работать, возможно, вам придется их удалить и заменить.

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>

Вышесказанное также позволяет пользователю выбрать первый вариант ('Выберите один ...') в обоих выбирает.