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?
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}}";
}
}
