【发布时间】:2017-05-23 13:49:15
【问题描述】:
我需要修改一些用于我正在为我工作的学校创建的网站的代码,以禁止同时选择某些选项。
向用户呈现以下 HTML 下拉列表 6 次:
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option...</option>
<option value="Art">Art</option>
<option value="Business Studies">Business Studies</option>
<option value="Computing">Computing</option>
<option value="Drama">Drama</option>
<option value="French">French</option>
<option value="Food Technology">Food Technology</option>
<option value="Geography">Geography</option>
<option value="German">German</option>
<option value="History">History</option>
<option value="Music">Music</option>
<option value="Philosophy and Ethics">Philosophy and Ethics</option>
<option value="Product Design">Product Design</option>
<option value="Physical Education">Physical Education</option>
<option value="Spanish">Spanish</option>
<option value="Science (Triple)">Science (Triple Award - 3 GCSEs)</option>
<option value="Textiles">Textiles</option>
</select>
用户不能同时选择艺术和纺织品。他们可以选择艺术或纺织品——但不能同时选择两者。
例如:用户在 opt1 中选择了“艺术”,因此在其余 5 个菜单中禁用了 Textiles。如果用户返回并取消选择 Art,则应始终启用 Textiles。希望你明白我的意思。
我已经有防止多次选择相同选项的代码:
$(function() {
$('select').change(function(){
if($(this).attr('id') == 'opt1' && $(this).val() == 'Default'){
$('select').not(this).prop('disabled', true).val('Disabled');
} else {
$('select').not(this).removeProp('disabled');
$('select option').removeProp('disabled');
$('select').each(function() {
var val = $(this).val();
if(val != 'Default' || val != 'Disabled'){
$('select option[value="'+val+'"]').not(this).prop('disabled', true);
}
});
}
});
});
然后用户单击提交,然后所有这些都将提交到 MySQL 服务器以供以后审核。
菜单名为 opt1、opt2、opt3、opt4、optRes1 和 optRes2。
谢谢大家,
杰克
【问题讨论】:
-
可能类似于
<option value="Art" data-not-with="Textiles">(对于 Textiles 则相反),然后在您的更改处理程序中检查该属性以查看要禁用哪些(如果有)其他选项。顺便说一句,为什么不同时将艺术和纺织品?它们是完全不同的主题...... -
为什么不用用户
onchange事件而不是数组。filter操作? -
@nnnnnn,它基本上是GCSE的东西,学校要求用户不能同时参加这两个课程!
标签: javascript jquery html css