我正在尝试制作一个体育博彩页面。用户需要选择哪两支球队互相比赛。
所以,我有两个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…
<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…
<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>