Question

我正在编写一个程序，其中有2个下拉菜单和两个按钮，当我选择下拉菜单1和下拉菜单2并点击开始时，必须禁用该按钮，必须启用第二个按钮，以及下拉列表将被禁用。当我刷新时，状态必须继续保持相同，说我选择了两个下拉菜单并开始启动，下拉菜单将被禁用并且启动也将启动，但是当我刷新表单后，将启用停止刷新，应该是一样的。我可以使用localStorage并为按钮执行此操作，但无法知道如何为下拉列表执行相同操作。以下是我的js。

$(document).ready(function() {
    if (typeof (Storage) !== "undefined") {
        var stat = localStorage.getItem("clickStat");
        if (stat == "start") {
            $('#Start').attr("disabled", true);
            $('#Stop').attr("disabled", false);

        } else {
            $('#Start').attr("disabled", false);
            $('#Stop').attr("disabled", true);
        }
    }
    var form = $('#formSec');
    var task = document.getElementById('task');
    var subtask = $('#subtask');

    $('#Start').on("click", function() {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem("clickStat", "start");
        }
        $.ajax({
            type : "post",
            url : "UpdateStartTime",
            data : form.serialize(),
            success : function() {
                $('#task').attr("disabled", true);
                $('#subtask').attr("disabled", true);
                $('#Start').attr("disabled", true);
                $('#Stop').attr("disabled", false);
            }
        });
        return false;
    });

    $('#Stop').on("click", function() {
        if (typeof (Storage) !== "undefined") {
            localStorage.setItem("clickStat", "stop");
        }
        var form = $('#formSec');
        var task = document.getElementById('task');
        var subtask = $('#subtask');
        $.ajax({
            type : "post",
            url : "UpdateEndTime",
            data : form.serialize(),
            success : function() {
                $('#task').attr("disabled", false);
                $('#subtask').attr("disabled", false);
                $('#Start').attr("disabled", false);
                $('#Stop').attr("disabled", true);
            }
        });
        return false;
    });

});

这是一个小提琴。 https://jsfiddle.net/fx9azgso/2/

请告诉我如何解决此问题。

由于

Answer 1

希望这有帮助，我已经为您更新了代码，查找注释START和END标记，以便了解我所做的更改。

请参阅工作示例@ https://jsfiddle.net/fx9azgso/24/

或者，请参阅以下代码：

    $(document).ready(function() {
    /*Set the variables with appropriate references [START]*/
    var form = $('#formSec');
    var task = $('#task');
    var subtask = $('#subtask');
    /*Set the variables with appropriate references [END]*/

    if (typeof(Storage) !== "undefined") {

        /*Extract values from localStorage [START]*/
        var stat = localStorage.getItem("clickStat");
        var taskVal = localStorage.getItem("taskVal");
        var subtaskVal = localStorage.getItem("subtaskVal");
        /*Extract values from localStorage [END]*/

        if (stat == "start") {
            $('#Start').attr("disabled", true);
            task.attr("disabled", true);
            subtask.attr("disabled", true);
            $('#Stop').attr("disabled", false);

        } else {
            $('#Start').attr("disabled", false);
            task.attr("disabled", false);
            subtask.attr("disabled", false);
            $('#Stop').attr("disabled", true);
        }
    }

    /*If locaStorage values are assigned property i.e. App has been started at least once, assign values [START]*/
    if (taskVal !== null)
        task.val(taskVal);

    if (subtaskVal !== null)
        subtask.val(subtaskVal);
    /*If locaStorage values are assigned property i.e. App has been started at least once, assign values [END]*/


    $('#Start').on("click", function() {
        if (typeof(Storage) !== "undefined") {
            /*Store values in localStorage [START]*/
            localStorage.setItem("clickStat", "start");
            localStorage.setItem("taskVal", task.val());
            localStorage.setItem("subtaskVal", subtask.val());
            /*Store values in localStorage [END]*/
        }
        $.ajax({
            type: "post",
            url: "UpdateStartTime",
            data: form.serialize(),
            success: function() {
                $('#task').attr("disabled", true);
                $('#subtask').attr("disabled", true);
                $('#Start').attr("disabled", true);
                $('#Stop').attr("disabled", false);
            }
        });
        return false;
    });

    $('#Stop').on("click", function() {
        if (typeof(Storage) !== "undefined") {
            /*Store values in localStorage [START]*/
            localStorage.setItem("clickStat", "stop");
            localStorage.setItem("taskVal", task.val());
            localStorage.setItem("subtaskVal", subtask.val());
            /*Store values in localStorage [END]*/
        }
        $.ajax({
            type: "post",
            url: "UpdateEndTime",
            data: form.serialize(),
            success: function() {
                $('#task').attr("disabled", false);
                $('#subtask').attr("disabled", false);
                $('#Start').attr("disabled", false);
                $('#Stop').attr("disabled", true);
            }
        });
        return false;
    });

});

如何在刷新后保留下拉值

1 个答案: