调用window.history.back()后级联Dropdown2值丢失的原因及保留方法

我用HTML+jQuery实现了级联下拉框，Dropdown1（对应代码里的dropdown2）选中后，Dropdown2（对应dropdown3）的选项会动态生成。提交表单时，若验证发现其他字段为空，会调用window.history.back()返回页面，此时输入框和Dropdown1的值能正常保留，但Dropdown2的选中值丢失了。

复现步骤：

• 输入姓名，选择Dropdown1，再选中Dropdown2的对应值
• 点击Add按钮，触发其他下拉框未填写的验证提示
• 调用window.history.back()返回页面
• Dropdown2的值丢失

相关代码：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
          $("#dropdown2").change(function() {
                $("#dropdown3").empty();
                $("#dropdown3").append(`<option value="A">choice a</option>`);
                $("#dropdown3").append(`<option value="B">choice b</option>`);
          });
    });
</script>
</head>
<body>

<form method="post">
    First name
    <input type="text" id="fname" name="fname"><br>   <br>
    Dropdown1
    <select name="dropdown2" id="dropdown2">
    <option value="0">--select--</option>
    <option value="1">choice 1</option>
    <option value="2">choice 2</option>
    </select>
    Dropdown2
    <select name="dropdown3" id="dropdown3">
    </select> <br>       <br>
    Other Dropdown
    <select name="other_dropdown" id="other_dropdown">
    <option value="0">--select--</option>
    <option value="1">choice 1</option>
    <option value="2">choice 2</option>
    </select> <br>      <br>
    <button type="submit" name="submit">Add</button>
</form>

</body>
</html>

问题根源 #

浏览器回退后会自动保留原生表单元素（输入框、静态下拉框）的状态，但Dropdown2的选项是通过Dropdown1的change事件动态生成的。回退后，Dropdown1的选中状态虽被保留，但change事件不会自动触发，导致Dropdown2没有可显示的选项，之前选中的值自然无法展示。

解决方案 #

方法1：页面加载时主动恢复Dropdown2状态

把生成Dropdown2选项的逻辑封装成函数，页面初始化时检查Dropdown1是否有非默认选中值，同时读取浏览器保留的Dropdown2选中值，主动生成选项并设置选中状态。

修改后的jQuery代码：

$(document).ready(function() {
    // 封装生成dropdown3选项的复用函数
    function generateDropdown3Options() {
        $("#dropdown3").empty();
        $("#dropdown3").append(`<option value="A">choice a</option>`);
        $("#dropdown3").append(`<option value="B">choice b</option>`);
    }

    // Dropdown1变化时触发选项生成
    $("#dropdown2").change(function() {
        generateDropdown3Options();
    });

    // 页面加载时恢复状态
    const dropdown2Selected = $("#dropdown2").val();
    const dropdown3SavedVal = $("#dropdown3").val();
    // 如果Dropdown1不是默认值，且Dropdown2有保留的选中值
    if (dropdown2Selected !== "0" && dropdown3SavedVal) {
        generateDropdown3Options();
        $("#dropdown3").val(dropdown3SavedVal);
    }
});

方法2：用localStorage临时存储选中值

如果级联逻辑更复杂，或者需要跨页面/刷新保留状态，可以用localStorage存储Dropdown2的选中值，页面加载时读取并恢复。

修改后的jQuery代码：

$(document).ready(function() {
    function generateDropdown3Options() {
        $("#dropdown3").empty();
        $("#dropdown3").append(`<option value="A">choice a</option>`);
        $("#dropdown3").append(`<option value="B">choice b</option>`);
    }

    $("#dropdown2").change(function() {
        generateDropdown3Options();
    });

    // 选中Dropdown2时，把值存到localStorage
    $("#dropdown3").change(function() {
        localStorage.setItem("selectedDropdown3", $(this).val());
    });

    // 页面加载时读取存储的值并恢复
    const dropdown2Selected = $("#dropdown2").val();
    const savedVal = localStorage.getItem("selectedDropdown3");
    if (dropdown2Selected !== "0" && savedVal) {
        generateDropdown3Options();
        $("#dropdown3").val(savedVal);
    }

    // 表单提交成功后清空存储，避免后续页面干扰
    $("form").submit(function() {
        localStorage.removeItem("selectedDropdown3");
    });
});

内容的提问来源于stack exchange，提问作者prawat wijarnpiboon