如何在刷新後保留下拉值

Question

我正在編寫一個程序，其中有兩個下拉菜單和兩個按鈕，當我選擇下拉菜單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

希望這有助於我已經更新了你的代碼，看徵求意見開始和結束標記，以便得到的我都做了改變的想法。

請參閱工作樣例@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; 
    }); 

});