带有下拉项的HTML表单，如何从下一个表单中实时删除它

HTML Forms with drop down items, how to remove it from in realtime for the next form?

本文关键字：表单 下一个 删除 实时 HTML      更新时间：2023-09-26

我有一个JSP页面，填充了 3 个不同的下拉菜单。

它们都填充相同。我正在寻找一种javascript方法，如果他们从下拉列表中选择一个，则他们转到下拉列表中的下一个方法将没有该选项。

假设您有 3 个选择"选择1"、"选择2"和"选择3"。 将 onchange 事件添加到 "Select1"：

<script language="javascript">
function Select1_OnChange() {
    var elemSelect1 = document.getElementById("Select1");
    var elemSelect2 = document.getElementById("Select2");
    var elemSelect3 = document.getElementById("Select3");
    var selValue = elemSelect1.options[elemSelect1.selectedIndex].value;
    elemSelect2.remove(getIndexFromValue(elemSelect2,selValue));
    elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function Select2_OnChange() {
    var elemSelect2 = document.getElementById("Select2");
    var elemSelect3 = document.getElementById("Select3");
    var selValue = elemSelect2.options[elemSelect2.selectedIndex].value;
    elemSelect3.remove(getIndexFromValue(elemSelect3, selValue));
}
function getIndexFromValue(objSelect,strValue) {
    var ret;
    for (i = 0; i < objSelect.options.length; i++) {
        if (objSelect.options[i].value == strValue) {
            ret = i;
        }
    }
    return ret;
}
</script>

标记可能如下所示：

<select id="Select1" name="Select1" size="1" onchange="Select1_OnChange()>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
<select id="Select2" name="Select2" size="1" onchange="Select2_OnChange()>
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
<select id="Select3" name="Select3" size="1">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
    <option value="yellow">Yellow</option>
</select>
相关文章：