選擇下拉觸發多個頁面重新加載

Question

我有一個 mvc 網格和一個選擇列表。 當用戶進行選擇時，on change 甚至會觸發帖子數據填充網格並顯示顯示附加鏈接。 有一個附加文本框來過濾數據。 如果用戶單擊其中一個鏈接，我會獲取本地存儲中列表存儲的選定值，我會從文本框中獲取搜索字符串並將其存儲在本地存儲中，然后導航到不同的頁面。

現在，當用戶在查看一些數據並想再次查看網格頁面后單擊瀏覽器后退按鈕時，問題就出現了。 我從本地存儲中獲取值，將它們放入選擇列表和文本框中，並觸發提交以重新顯示它們過濾的數據。 但這一直在不斷地重新發布。 有什么建議

提前致謝

$(document).ready(function () { 

$('select').on('change', function (event) {
    if ($("option:selected", this).val() != "-1") {
        
        $(event.target).parents('form').trigger("submit");
        localStorage.setItem('qName', $('#qId option:selected').text());
        localStorage.setItem('eId', $("option:selected", this).val());
        
    }
});


if (localStorage.getItem('searchString') !== null) {
        $('option:selected', localStorage.getItem('eId')).val();
        $('form').trigger("submit");        
}    

});

Answer 1

您可以使用.trigger( event [, extraParameters ] )來區分事件是來自一個函數還是另一個。 此外，如果提交來自不需要的函數，您需要為表單添加一個提交處理程序，以防止默認操作：

$('form').on('submit', function(e, extraParams) {

 $('form').on('submit', function(e, extraParams) { if (extraParams == true) { e.preventDefault(); } }); $('select').on('change', function (event) { if ($("option:selected", this).val() != "-1") { localStorage.setItem('qName', $('#qId option:selected').text()); localStorage.setItem('eId', $("option:selected", this).val()); $(event.target).parents('form').trigger("submit"); } }); if (localStorage.getItem('searchString') !== null) { $('option:selected', localStorage.getItem('eId')).val(); $('form').trigger("submit", true); // extraParams }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <select> <option value="1">one</option> <option value="2">two</option> </select> </form>