Retaining dropdown selection on page reload

Question

I have a select list on a page like this:

<select name='elements'>
    <option value='water'>Water</option>
    <option value='fire'>Fire</option>
    <option value='air'>Air</option>
</select>

EDIT: When a user makes a selection, the current page is refreshed, but how do I keep the user's selection visible in the list after the page refresh? In other words, I don't want the list to rollback to its default selected value.

Help please

Is there any reason you want a full page refresh? why not simply show/hide/populate from an async call...? — balexandre, Jun 07 '12 at 22:41
I wanna translate the content of the whole page into another language, so yes I want a full page refresh — user765368, Jun 07 '12 at 22:45

score 4 · Answer 1 · answered Jun 07 '12 at 23:13

Here is a Javascript-only solution.

 <select name='elements' id='elements' onChange='window.location="yoururl.html?value=" + this.value;'>
     <option value='water'>Water</option>
     <option value='fire'>Fire</option>
     <option value='air'>Air</option>
 </select>

Then you use this function to see if the value parameter is set and get it and you can use jQuery to set it as selected.

$("#elements option[value='" + result_of_gup + "']").attr("selected","selected") ;

score 3 · Answer 2 · answered Jun 07 '12 at 22:42

3

 <select name='elements' onChange='window.location="yoururl.php?value=" + this.value;'>
     <option value='water'>Water</option>
     <option value='fire'>Fire</option>
     <option value='air'>Air</option>
 </select>

answered Jun 07 '12 at 22:42

Control Freak

12,965
30
94
145

What about the `keeping the user's selection visible in the list`? – user765368 Jun 07 '12 at 22:46
You have to worry about that on the `yoururl.php?value=fire` page, as long as you have a new page load with the querystring, just use that value to render your new page accordingly.. To preselect an item in a list just do ``. Also, you barely posted any code, so its hard to say what you're truly needing accomplished. – Control Freak Jun 07 '12 at 22:47

score 0 · Answer 3 · edited May 23 '17 at 11:52

Doing it without jQuery:

Create window.location.getParameter() function (see here from Anatoly Mironov) then:

<select name='elements' id='elements' onChange='window.location="yoururl.html?elements=" + this.selectedIndex;'>
   <option value='water'>Water</option>
   <option value='fire'>Fire</option>
   <option value='air'>Air</option>
</select>

<script type="text/javascript">
  els = document.getElementById('elements');
  selIndex = window.location.getParameter('elements') || 0;
  els[selIndex].selected = true;
</script>

For ease of reference, I reproduce Anatoly's excellent .getParameter function below:

window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
};

Retaining dropdown selection on page reload

3 Answers3