[英]Disable Option 2 when Option 1 is selected
I need to adapt some code I've used for a website I'm creating for a school I work for, to disallow certain options to be selected at the same time. 我需要调整一些我用于我正在为我所工作的学校创建的网站的代码,以禁止同时选择某些选项。
The user is presented the following HTML drop down list 6 times: 用户将看到以下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>
The user should NOT be able to select both Art and Textiles at the same time. 用户不应同时选择艺术品和纺织品。 They can select EITHER Art OR Textiles - but not both. 他们可以选择EITHER Art OR Textiles - 但不能同时选择两者。
For example: User selects 'Art' in opt1, so Textiles is disabled in the remaining 5 menus. 例如:用户在opt1中选择“Art”,因此在剩余的5个菜单中禁用Textiles。 If the user goes back and deselects Art, Textiles should then be enabled throughout. 如果用户返回并取消选择Art,则应始终启用Textiles。 Hopefully you understand what I mean. 希望你明白我的意思。
I already have the code to prevent the same option being selected multiple times: 我已经有代码阻止多次选择相同的选项:
$(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);
}
});
}
});
});
The user then clicks submit and all of this is then submit to a MySQL server for review at a later date. 然后,用户单击“提交”,然后将所有这些提交到MySQL服务器以供日后查看。
Menus are named opt1, opt2, opt3, opt4, optRes1 and optRes2. 菜单名为opt1,opt2,opt3,opt4,optRes1和optRes2。
Thanks everyone, 感谢大家,
Jack 插口
Try to add a overlapping div with id selection and then select every select and disable the chosen option on change like so: 尝试添加一个带有id选择的重叠div,然后选择每个选择并在更改时禁用所选选项,如下所示:
<div id="selection">
<select type="select" name="optRes2" select id="optRes2">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
<select type="select" name="optRes3" select id="optRes3">
<option value="" disabled selected hidden>Please select an option... </option>
<option value="Art">Art</option>
etc
</select>
</div>
and the script 和脚本
<script type="text/JavaScript" language="JavaScript">
$( "#optRes2" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes2').val() ){
$(this).attr("disabled","true");
}
});
});
$( "#optRes3" ).change(function() {
$("div#selection select.select option").each(function(){
if($(this).val()== $('#optRes3').val() ){
$(this).attr("disabled","true");
}
});
});
</script>
I use a data attribute named notallowed
. 我使用名为notallowed
的数据属性。 There you can set which value that should be disabled. 在那里,您可以设置应禁用的值。 And when a value is changed we also check if we previously disabled some fields and re-enable them. 当值发生变化时,我们还会检查我们之前是否禁用了某些字段并重新启用它们。
$('select').change(function(){ var notAllowed = $(this).find('option:selected').data('notallowed'); var currentValue = $(this).val(); // Get the previous selected value. var oldValue = $(this).data('old'); // Keep track of the previous selected value. $(this).data('old', currentValue); // Re-enabled all that was disabled by the previous selection. if(oldValue) { // Re-enable the old value in the other selects. $('select').not(this).find('option[value="' + oldValue +'"]').prop('disabled', false); // Get the option. var previousNotAllowed = $(this).find('option[value="' + oldValue +'"]').data('notallowed'); if(previousNotAllowed){ $('select').not(this).find('option[value="' + previousNotAllowed +'"]').prop('disabled', false); } } // If we selected a option with notallowed attribute we should disable that option in the other selects. if(notAllowed){ var items = $('select').not(this).find('option[value="' + notAllowed +'"]').prop('disabled',true); } // Disable the current value in other selects. $('select').not(this).find('option[value="' + currentValue +'"]').prop('disabled', true); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select type="select" name="optRes1" select id="optRes1"> <option value="" disabled selected hidden>Please select an option...</option> <option value="Art" data-notallowed="Textiles">Art</option> <option value="Business Studies">Business Studies</option> <option value="Computing" data-notallowed="Drama">Computing</option> <option value="Drama" data-notallowed="Computing">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" data-notallowed="Art">Textiles</option> </select> <select type="select" name="optRes2" select id="optRes2"> <option value="" disabled selected hidden>Please select an option...</option> <option value="Art" data-notallowed="Textiles">Art</option> <option value="Business Studies">Business Studies</option> <option value="Computing" data-notallowed="Drama">Computing</option> <option value="Drama" data-notallowed="Computing">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" data-notallowed="Art">Textiles</option> </select> <select type="select" name="optRes3" select id="optRes3"> <option value="" disabled selected hidden>Please select an option...</option> <option value="Art" data-notallowed="Textiles">Art</option> <option value="Business Studies">Business Studies</option> <option value="Computing" data-notallowed="Drama">Computing</option> <option value="Drama" data-notallowed="Computing">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" data-notallowed="Art">Textiles</option> </select>
Better create options array, and work with data, not with HTML. 更好地创建选项数组,并使用数据,而不是HTML。 Using this approach you will be able to stay DRY. 使用这种方法,您将能够保持干爽。
Think solution is clear. 认为解决方案很明确。
<html>
<body>
<select type="select" name="optRes3" select id="optRes1">
<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>
<select type="select" name="optRes3" 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>
<select type="select" name="optRes3" select id="optRes3">
<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>
<script>
function OptResDropdown(htmlDropdown, value) {
this.value = value;
this.dropdown = htmlDropdown;
this.options = this.initOptions(htmlDropdown.options);
var selected = htmlDropdown.options[htmlDropdown.selectedIndex];
this.value = value? value : (selected ? selected.value : 0);
var me = this;
htmlDropdown.addEventListener('change', function(event){
me.value = event.target.value;
me.update(me.value);
});
this.update();
}
OptResDropdown.instances = {};
OptResDropdown.prototype.initOptions = function(options){
var me = this;
var out = [];
for(var i = 0; i < options.length; i++) {
var option = options[i];
out.push({value: option.value, label: option.innerText});
}
return out;
};
OptResDropdown.prototype.update = function(value) {
for(var key in OptResDropdown.instances) {
var me = OptResDropdown.instances[key];
me.dropdown.innerHTML = '';
var options;
if(value === 'Art') {
options = me.options.filter(function(option){
return option.value !== 'Textiles';
});
} else if(value === 'Textiles') {
options = me.options.filter(function(option){
return option.value !== 'Art';
});
} else {
options = me.options;
}
options.forEach(function(option){
var opt = document.createElement('option');
opt.value = option.value;
opt.innerText = option.label;
me.dropdown.appendChild(opt);
})
me.dropdown.value = me.value;
}
};
var opt1 = new OptResDropdown(optRes1);
var opt2 = new OptResDropdown(optRes2);
var opt3 = new OptResDropdown(optRes3);
OptResDropdown.instances.opt1 = opt1;
OptResDropdown.instances.opt2 = opt2;
OptResDropdown.instances.opt3 = opt3;
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.