如果第一个选项已被选中,则从第二个选择中删除该选项
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…
<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>
相关文章:
- 设置选项对象关键点:值对以实现带第二个y轴的动态打印
- 使用javascript和html选择第二个选项后发出警报
- 使第二个选项卡处于第一个活动状态
- 两个选项卡—第一个选项卡在第二个选项卡中处于调试模式时被卡住
- Jquery插件使用第二个实例's选项
- 第一个下拉菜单可自动更改第二个下拉菜单的选项
- 获取所选项目的值,并在第二个下拉列表中更改列表
- jQuery - 添加第二个变量以选择选项字段
- 如何根据第一个<选择>选项填充第二个<选择>选项
- 引导选项卡显示事件仅在第一次触发,而不会在第二个或以后的选项卡开关上触发
- jQuery选项卡:摆脱第二个选项卡上的“上一个”导航按钮
- 第二个jQueryValidate在Bootstrap选项卡中不起作用
- 需要帮助根据用户在第一个下拉框中选择的内容创建第二个选项下拉框
- 使用javascript在第一个选择列表选项的基础上更改第二个选择列表
- 在第一个列表中显示一个li,在单击第二个列表中的另一个选项后,在单击时隐藏其余|保存第一个列表的选项
- 当第一个选项卡处于活动状态时,第二个选项卡不处于活动状态;不起作用
- 对于2个日期,我需要根据第一个日期选择来阻止第二个日期的日期选择器选项
- 使用bootstrap-select.js根据第一个下拉列表更改第二个下拉列表的选项
- 显示基于第一个选择框中选择的选项的第二个选择框
- 如果第一个下拉框中的某个选项处于选定状态,则创建第二个下拉框