I have the following drop down list:

Gender<select name="gender"  id="gender"> 
  <option value=" "> EMPTY </option> 
  <option value="Male">Male</option> 
  <option value="Female">Female</option> 
</select>

If I choose one of the options, it should stay selected as a primary option even if I renew the page. For example, if I choose Male, the dropdown list should keep Male as a selected option and this should only change when I click on it with the mouse. How to do this in JavaScript?

I have the following drop down list:

Gender<select name="gender"  id="gender"> 
  <option value=" "> EMPTY </option> 
  <option value="Male">Male</option> 
  <option value="Female">Female</option> 
</select>

If I choose one of the options, it should stay selected as a primary option even if I renew the page. For example, if I choose Male, the dropdown list should keep Male as a selected option and this should only change when I click on it with the mouse. How to do this in JavaScript?

• javascript
• drop-down-menu

Share Improve this question Follow asked Feb 28, 2013 at 15:49 3352833528 38266 gold badges1212 silver badges3030 bronze badges 5

• You mean, when you refresh? Is there any server-side language involved here? – Ry- ♦ Commented Feb 28, 2013 at 15:50
• 1 localStorage (or dataStorage if old IEs) or as last resource cookies (unless you want to store user preferences on server side) (read this too) – Adriano Repetti Commented Feb 28, 2013 at 15:51
• yes when I refresh the page. I am using php also – 33528 Commented Feb 28, 2013 at 15:53
• js can also parse data in a querystring. So could set form action to GET. But if this is js, why not just make it an ajax call and not refresh the page? – Kevin Seifert Commented Feb 28, 2013 at 15:54
• 1 If you are using PHP, then you typically redraw the ponent with PHP, not javascript. That or use Ajax and do it with JS and avoid the refresh – Kevin Seifert Commented Feb 28, 2013 at 15:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Here's a javascript/jquery way, using localStorage. If you're going to do this in a lot of places there are probably ways to optimize this code.

$(function() {
    var genderValue = localStorage.getItem("genderValue");
    if(genderValue != null) {
        $("select[name=gender]").val(genderValue);
    }

    $("select[name=gender]").on("change", function() {
        localStorage.setItem("genderValue", $(this).val());
    });
})

HTML pages are stateless - meaning they don't remember state. In order to do what you describe we usually have the server-side code output different HTML depending on the values of the previously-submitted form.

There are JavaScript-only ways to to this using a URL hash, but you're going to need some server-side code to run your web site regardless.

How about if you want to retain the value, when you navigate back to this page through an EDIT button on it successor page. Here is my post: Retain dynamically created DropDown list's selected value on event window.history.back()- JavaScript

I was stuck on same thing here is a simple js solution. consider u have multiple options .

 <select name="min" id="min" style="padding: 5px;"  placeholder="Minutes" >

            {% for i in b %}
            <option value="{{i}}" >{{i}}</option>
            
            {% endfor %}

        

        </select>

and js for same is

<script>
window.onload = function(){
    
    v=document.getElementById("min");
    if ("{{min}}" ){
        v.value="{{min}}";
    }
}

here min in curly braces is accessing values from context in views.