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

Question

我有三个下拉列表，大约有25个值。我的目标是一旦选择了其他下拉列表中的项目。

例如： 在ItemA中选择了Dropdown1。然后需要从ItemA和Dropdown2移除Dropdown3。如果在ItemB中选择了Dropdown2，则需要将其从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>

它最终删除了错误的对象，当我到达Dropdown3时，它有大约8个值，而不是它应该有的值。

编辑：更改下拉列表时调用UpdateQuestions()！