select drop down on change reload reverts to first option

Question

I have a select drop down and when I select a value I want to refresh the page.

The problem is that only firefox keeps the selected value chrome and IE do the reload but they revert to the first option

<select id="combobox1" onchange="location.reload()">
<option value="YTD">YTD</option>
<option value="QTD">QTD</option>
<option value="MTD">MTD</option>
</select>

Why reload the page anyway? it will not work unless you keep a form "state" encoded in the url like in a hashtag or something, still, just do ajax calls and do not reload the page. — Victor Radu, Apr 09 '15 at 09:17
@tripleb there could be any number of reasons to refresh the page and there are more than a few ways to reset the selected value — Wesley Smith, Apr 09 '15 at 09:23
Use localstorage. Refer [here](http://www.w3schools.com/html/html5_webstorage.asp) — Gilsha, Apr 09 '15 at 09:42
@tripleb thanks i am very new and i dont know how to make ajax calls i reload the page to get dropdown index and get elements from xml data thanks anyway! — George Gour, Apr 09 '15 at 10:32
@DelightedD0D I do not doubt there there might be a reason for reloading the page, just can't think of any one reason to do that where you do not have a more elegant solution with faster response time, do you have an example for me? P.S I thouhgt the point was to keep the value in the dropdown not to reset it, my mistake I guess — Victor Radu, Apr 09 '15 at 11:52
@tripleb say you have advertisements on the page, refreshing the page would be the easiest way to also refresh those advertisements, though you have a point, the OP should elaborate on why he needs to refresh the page as there is probably a better way to achieve the end result. For the other part, my comment does seem confusing, I meant "set the select back to the previously selected value" — Wesley Smith, Apr 09 '15 at 12:10

score 1 · Accepted Answer · answered Apr 09 '15 at 09:18

I would use localStorage to store the value between page loads:

Working jsFiddle

$(function() {
    if(localStorage.getItem('combobox1')){
        $('#combobox1').val(localStorage.getItem('combobox1'));
    }

    $('#combobox1').change(function(){
        localStorage.setItem('combobox1',$('#combobox1').val() );
        location.reload();
    });
});

......

<select id="combobox1" >
<option value="YTD">YTD</option>
<option value="QTD">QTD</option>
<option value="MTD">MTD</option>
</select>

score -1 · Answer 2 · answered Apr 09 '15 at 09:14

-1

If you have written this dropdown inside a form, before calling reload method submit the form.

i.e onchange="this.form.submit();location.reload()"

answered Apr 09 '15 at 09:14

Udhay

189
1
1
6

The OP is trying to re-select the previously selected value on page load, this does not do that – Wesley Smith Apr 09 '15 at 09:21
If you submit the form,dropdown value will be saved with newly selected value. Hence while reload it will take the new value. – Udhay Apr 09 '15 at 09:39
Fair enough, however you get this nasty popup in IE: http://prntscr.com/6rireg and this one in firefox: http://prntscr.com/6rissq – Wesley Smith Apr 09 '15 at 09:45

select drop down on change reload reverts to first option

2 Answers2

Working jsFiddle