我正在写一个表格 4<select>
元素。它们都有相同的选项,我想禁用、隐藏或删除其中一个选项<select>
在另一个<select>
具有相同选项的元素,以防止用户在多个选项中选择相同的选项<select>
元素。
没有 jQuery,请只使用纯 JavaScript。
如果可能的话,我希望第一个选项始终显示在所有内容中<select>
要素:
<option class="select-items" selected>Sélectionnez..</option>
这是 HTML 之一<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 的一部分:
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}`;
In your change
事件监听器,您可以从所有事件中获取当前选定的值集<select>
组中的元素,然后循环遍历每个元素的选项,以禁用组中其他位置当前选择的选项,并重新启用之前选择但已更改的任何选项。您可以通过在禁用/启用选项之前检查值来避免禁用每个选择中的第一个“标签”选项。
您可以使用相同的方法来隐藏或删除选项,请记住,尝试隐藏时会出现一些浏览器兼容性问题<option>
元素,并且如果要删除和恢复它们,您将需要一些额外的代码来存储完整的选项列表。
const selects = document.querySelectorAll('.select-group');
selects.forEach((elem) => {
elem.addEventListener('change', (event) => {
const values = Array.from(selects).map((select) => select.value);
for (const select of selects) {
select.querySelectorAll('option').forEach((option) => {
const 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)