Javascript 根据其他下拉列表的值删除或添加下拉列表中的项目

Javascript 根据其他下拉列表的值删除或添加下拉列表中的项目,javascript,Javascript,我有三个下拉列表,大约有25个值。我的目标是在选中某个项目后将其从其他下拉列表中删除 例如: 在下拉列表1中选择项目aItemA。如果在Dropdown2中选择了ItemB,则需要将其从Dropdown1和Dropdown3中删除 但是,我遇到的问题是,当用户更改Dropdown1的值时,我需要再次将该值添加到Dropdown2和Dropdown3中 我最初的想法是有一个页面加载时填充的所有值的主列表,然后将其用作参考点。我考虑过的另一个选项是,根据先前的下拉列表值是否为空,禁用并启用Dropd

我有三个下拉列表,大约有25个值。我的目标是在选中某个项目后将其从其他下拉列表中删除

例如: 在
下拉列表1
中选择
项目a
<然后需要从
Dropdown2
Dropdown3
中删除code>ItemA。如果在
Dropdown2
中选择了
ItemB
,则需要将其从
Dropdown1
Dropdown3
中删除

但是,我遇到的问题是,当用户更改
Dropdown1
的值时,我需要再次将该值添加到
Dropdown2
Dropdown3

我最初的想法是有一个页面加载时填充的所有值的主列表,然后将其用作参考点。我考虑过的另一个选项是,根据先前的下拉列表值是否为空,禁用并启用
Dropdown2
Dropdown3

下面是我的一些代码,但效果不太好:

<script type="text/javascript">
    var q1 = document.getElementById('Dropdown1');
    var q2 = document.getElementById('Dropdown2');
    var q3 = document.getElementById('Dropdown3');
    var allQuestions = q1.options;

    function updateQuestions() {
        if (q1.value == '') {
            resetQuestions();
        } else {
            q2.disabled = false;
            q2.remove(q1.selectedIndex);
            q3.disabled = false;
            q3.remove(q1.selectedIndex);
        }

        if (q2.value == '') {
            q3.disabled = true;
            q3.value = '';
            q3.options = allQuestions;
        } else {
            q3.disabled = false;
            q3.remove(q1.selectedIndex);
            q3.remove(q2.selectedIndex);
        }
    }

    function resetQuestions() {
        q2.disabled = true;
        q3.disabled = true;
        q2.value = '';
        q3.value = '';
        q2.options = allQuestions;
        q3.options = allQuestions;
    }
</script>

var q1=document.getElementById('Dropdown1');
var q2=document.getElementById('Dropdown2');
var q3=document.getElementById('Dropdown3');
var allQuestions=q1.options;
函数updateQuestions(){
如果(q1.value==''){
重置问题();
}否则{
q2.disabled=false;
q2.移除(q1.选择的索引);
q3.disabled=false;
q3.移除(q1.选择的索引);
}
如果(q2.value==''){
q3.disabled=true;
q3.价值='';
q3.选项=所有问题;
}否则{
q3.disabled=false;
q3.移除(q1.选择的索引);
q3.移除(q2.选择索引);
}
}
函数重置问题(){
q2.disabled=true;
q3.disabled=true;
q2.价值='';
q3.价值='';
q2.选项=所有问题;
q3.选项=所有问题;
}
它最终删除了错误的对象,当我进入
Dropdown3
时,它有大约8个值,而不是它应该有的23个值


编辑:
UpdateQuestions()
在更改下拉列表时被调用

哎呀!我以为我把它拿走了!如果您是使用索引而不是使用它们的值来删除项目,那么只有当所有下拉列表中的项目顺序相同时,这种方法才会起作用。分享一把小提琴会更有帮助