如何禁用、隐藏或删除具有相同选项的其他选择中的选定选项? [英] How do I disable, hide, or remove selected option in other selects with the same options?
问题描述
我正在编写一个包含 4 个 元素的表单.它们都有相同的选项，我想从另一个 元素中的一个 中禁用、隐藏或删除所选选项相同的选项，以防止用户在多个 元素中选择相同的选项.
I'm writing a form with 4 <select> elements. They all have the same options and I would like to disable, hide, or remove the selected option from one <select> in the other <select> elements with the same options in order to prevent the user to select the same option in multiple <select> elements.
请不要使用 jQuery，请使用纯 JavaScript.
No jQuery, only plain JavaScript please.
如果可能，我希望第一个选项始终显示在所有 元素中:
If possible I would like the first option to always display in all <select> elements:
这是一个 的 HTML:
Here is the HTML for one <select>:
<select class="custom-select mb-3" id="name_typage_0">
<option class="select-items" selected>Sélectionnez..</option>
<option class="select-items" value="designation">Désignation</option>
<option class="select-items" value="email">Email</option>
<option class="select-items" value="ville">Ville</option>
<option class="select-items" value="secteur_activite">Secteur d'activité</option>
</select>
这是我的 JavaScript 的一部分:
Here is part of my JavaScript:
const custSelec = document.querySelectorAll('.custom-select');
custSelec.forEach(function(item){
item.addEventListener('change', function(){
if(item.options[item.selectedIndex].text == 'Sélectionnez..'){
count = -1;
}else{
count = 1;
total += count;
compteur.textContent = ` ${total}/${custSelec.length -1}`;
推荐答案
在您的 change 事件侦听器中，您可以从所有 中获取当前选定值的集合code> 组中的元素，然后循环遍历每个元素的选项，以禁用当前在组中其他地方选择的选项，以及重新启用以前选择但已更改的任何选项.您可以避免禁用第一个标签"通过在禁用/启用选项之前检查值来选择每个选项中的选项.
In your change event listener, you can get the current set of selected values from all <select> elements in the group, and then loop through each element's options to both disable the options currently selected elsewhere in the group as well as re-enable any options that were previously selected but have since been changed. You can avoid disabling the first "label" option in each of your selects by checking the value before disabling / enabling options.
您可以使用相同的方法来隐藏或删除选项，请记住，在尝试隐藏 <option> 元素时存在一些浏览器兼容性问题，并且您需要一些额外的代码来存储如果您要删除和恢复选项的完整列表.
You could use this same approach to hide or remove options keeping in mind that there are some browser compatibility issues when trying to hide <option> elements and that you would need some additional code to store the complete list of options if you were going to remove and restore them.
const selects = document.querySelectorAll('.select-group');
selects.forEach((elem) => {
elem.addEventListener('change', (event) => {
let values = Array.from(selects).map(select => select.value);
for (let select of selects) {
select.querySelectorAll('option').forEach((option) => {
let value = option.value;
if (value && value !== select.value && values.includes(value)) {
option.disabled = true;
} else {
option.disabled = false;
}
});
}
});
});<select class="select-group">
<option value="">Select...</option>
<option value="first">First Value</option>
<option value="second">Second Value</option>
<option value="third">Third Value</option>
</select>
<select class="select-group">
<option value="">Select...</option>
<option value="first">First Value</option>
<option value="second">Second Value</option>
<option value="third">Third Value</option>
</select>
<select class="select-group">
<option value="">Select...</option>
<option value="first">First Value</option>
<option value="second">Second Value</option>
<option value="third">Third Value</option>
</select>这篇关于如何禁用、隐藏或删除具有相同选项的其他选择中的选定选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
