Question

当从选择菜单中选择相应选项时，我有两个显示或隐藏的跨度。默认情况下，CSS中的两个跨度都设置为display: none。我希望在页面重新加载后保持任何当前可见范围的可见性（例如，如果存在验证错误）。

我用复选框做了这个，很简单，但我无法通过选择菜单来解决这个问题。

    // Toggles the div based on selected option
$(function() {
    $('#maintenanceIntervalId').change(function() {
        var value = $('#maintenanceIntervalId option:selected').val()

        switch(value) {
            case "2": {
                $("#weekly-maintenance-on").show();
                $("#monthly-maintenance-on").hide();
                break;
            }
            case "3": {
                $("#monthly-maintenance-on").show();
                $("#weekly-maintenance-on").hide();
                break;
            }
            case "1": {
                $("#weekly-maintenance-on").hide();
                $("#monthly-maintenance-on").hide();
                break;
            }
        }
    });
});

以上工作符合预期。但是为了在页面重新加载后让当前可见的跨度保持可见，我将switch语句移动到它自己的函数toggleMaintenanceDiv()并添加了以下行：

toggleMaintenanceDiv($('#maintenanceIntervalId option:selected'))

然而，这不起作用。

HTML：

<select id="maintenanceIntervalId">
    <option value="1">Day</option>
    <option value="2">Week</option>
    <option value="3">Month</option>
</select>

<span id="weekly-maintenance-on">Stuff one</span>
<span id="monthly-maintenance-on">Stuff two</span>

Answer 1

每次加载页面时都会重新加载脚本，重新加载后，javascript的所有变量或状态都将丢失。我认为你可以在cookie中存储可见的跨度ID，每次加载页面时，它会首先检查cookie并设置相应的跨度。

如何在页面重新加载后保持select-menu-toggled div的状态？

1 个答案: