選擇的onchange重新加載頁面，並保持所選擇的選項

我有這個https://jsfiddle.net/1zqgeq79/2/選擇的onchange重新加載頁面，並保持所選擇的選項

這是我使用，使頁面刷新時，選擇已經改變了jQuery，現在我只需要它來保持所選選項在頁面加載後。

 $('.ProductDetails select').change(function() { 
     location.reload(); 
     });

因爲我有多個項目，我知道一個（這個）將不得不被使用，但我仍然在學習jquery。謝謝您的幫助！

來源

2017-04-17 xohbrittx

使用的sessionStorage代替localStorage，如果您不想在關閉瀏覽器後持久保存數據。

我替換代碼：

var selectedProduct = sessionStorage.getItem("product"); 
if(selectedProduct != undefined || selectedProduct != null){ 
    $(".ProductDetails select").first().find(":selected").removeAttr("selected"); 
    $(".ProductDetails select").find("option").each(function() { 
      if ($(this).val() == selectedProduct) { 
       $(this).attr("selected", true); 
      } 
     }); 
} 

$('.ProductDetails select').change(function() { 
    sessionStorage.setItem("product", $(".ProductDetails select").first().val()); 

    location.reload(); 
});

只要到：https://jsfiddle.net/1zqgeq79/3/

我做了唯一的第一個下拉。

來源

2017-04-17 14:51:22

這工作完全謝謝你！有沒有辦法在JS運行時隱藏它，然後在完成時顯示它？ – xohbrittx

隱藏下拉菜單中的完整下拉菜單或顯示值爲空？ –

我調整了代碼，我用這個替換了代碼：隱藏下拉列表中的完整下拉列表或顯示值爲空？我還想讓你做POC，我通過刪除代碼來調整代碼： $（「。ProductDetails select」）。find（「option」）。each（function（）{ if（$ （this）.val（）== selectedProduct）{ $（this）.attr（「selected」，true）; } }）; 並放置 $（「。ProductDetails select」）。val（selectedProduct）如果您能夠提交表單，請嘗試。 –

您可以在重新加載之前添加查詢字符串參數。

var url = document.location; 
document.location = url + "?select=" + $(this).val();

所以，當頁面加載時，你可以閱讀這個參數，並按你的意願行事。

您也可以使用cookie來做到這一點。 jQuery允許你這樣做。看看這個鏈接：http://plugins.jquery.com/cookie/

來源

2017-04-17 14:40:22

*「你可以閱讀這個參數」* ...怎麼樣？答案不完整 – charlietfl

我不知道你在使用哪種語言？如果您只使用Javascript和HTML，則可以使用JS讀取參數。看看這篇文章：http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript。然後您可以這樣做： '$（'。ProductDetails select option [value =''+ val +'「]'）。attr（'selected'，'selected'）;' –

當你重新加載頁面時...所有腳本的運行方式與第一次加載時相同。以前的加載沒有保存或訪問。

然而，您可以將數據存儲在Cookie或localStorage中，並在頁面加載時訪問該數據。

試着這麼做：

$(function(){ 
    // get stored value or make it empty string if not available 
    var storedValue = localStorage.getItem('prod-detail') || ''; 

    $('.ProductDetails select').change(function() { 
     // store current value 
     var currValue = $(this).val(); 
     localStorage.setItem('prod-detail', currValue); 
     // now reload and all this code runs again 
     location.reload(); 
    }) 
    // set stored value when page loads 
    .val(storedValue) 

});

更好的解決辦法可能是使用AJAX來更新您的購物車存放在服務器上，並設置所有存儲的值存在時，頁面加載

來源

2017-04-17 14:45:28 charlietfl

True，但用戶將不得不去購物車看到其他UOM的價格，大多數人希望在將其添加到購物車之前查看所有選項的價格。 – xohbrittx

不是我的意思...可以在頁面中更新...但同時做頁面重新加載的服務器端更新。有很多方法可以有一輛車 – charlietfl

選擇的onchange重新加載頁面，並保持所選擇的選項

回答

相關問題