Select onchange reload the page and keep the selected option

Question

I have this https://jsfiddle.net/1zqgeq79/2/

This is the jquery I'm using to make the page refresh when a select has been changed and now I just need it to keep that selected option after the page loads.

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

Since I have multiple items I know a (this) will have to be used, but I'm still learning jquery. Thanks for the help!

score 5 · Accepted Answer · answered Apr 17 '17 at 14:51

5

Use sessionStorage instead of localStorage if you don't want to keep the data parmanently after closing the browser.

I replaced the code with:

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();
});

Just go to: https://jsfiddle.net/1zqgeq79/3/

I did for first dropdown only.

answered Apr 17 '17 at 14:51

Prashant Tomar

209
1
11

this worked perfectly thank you!!! is there a way to have it hide while the JS runs and then when it's done show it? – xohbrittx Apr 17 '17 at 16:46
Hide the complete dropdown or show value as empty in the dropdown? – Prashant Tomar Apr 18 '17 at 07:14
I tweaked the code, I just replaced the code with this: Hide the complete dropdown or show value as empty in the dropdown? One more thing I would like for you to do the POC, I tweaked the code by removing: $(".ProductDetails select").find("option").each(function () { if ($(this).val() == selectedProduct) { $(this).attr("selected", true); } }); and placed $(".ProductDetails select").val(selectedProduct) Try it if you are able to submit the form. – Prashant Tomar Apr 18 '17 at 07:21
@PrashantTomar, how to unset the session? – Jafar Pinjar Jan 06 '19 at 10:27
@jafarpinjart try sessionStorage.removeItem(key) – Prashant Tomar Jan 14 '19 at 12:44

charlietfl · Answer 2 · 2017-04-17T15:08:23.747

When you reload the page... all your script runs the same way as when you loaded it the first time. Nothing is saved or accessible from previous load.

You can however store data in cookies or localStorage and access that when page loads.

Try something like:

$(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)

});

A better solution might be to use ajax to update your cart stored on server and set all stored values there when page loads

True, but then the user would have to go to the shopping cart to see the price of the other UOM and most people want to see what the price is for all the options before adding it to the shopping cart. — xohbrittx, Apr 17 '17 at 16:37
Not what i mean...can update in page...but simultaneously do server side updates for page reloads. Numerous ways to approach having a cart — charlietfl, Apr 17 '17 at 16:43

score -2 · Answer 3 · answered Apr 17 '17 at 14:40

-2

You can either add a query string parameter before reloading.

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

So when the page is loading you can read this parameter and act as you want.

You can also do this using a cookie. jQuery allows you do do that. Check out this link: http://plugins.jquery.com/cookie/

answered Apr 17 '17 at 14:40

bobo_dev

110
3

*"you can read this parameter "* ... how? Answer is incomplete – charlietfl Apr 17 '17 at 14:46
I don't know which languages are you using ? If you only use Javascript and HTML, you can read the parameter using JS. Take a look at this post: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript. Then you can do that: `$('.ProductDetails select option[value="'+val+'"]').attr('selected', 'selected');` – bobo_dev Apr 17 '17 at 15:27

Select onchange reload the page and keep the selected option

3 Answers3

Linked