Question

I have this form:

<form action="" method="post">
   <select name="weeks" id="weeks">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
   </select>
<input type="submit" value="Submit" />
</form>

How do I set an option to selected when the form is reloaded? Such as if I select 6 it will be selected for option 6 on reload and then if I switch it to 2 it will have 2 selected on reload?

Answer 1

if you want a persistent behavior you should save the selected state somewhere.

you can save it on the server side (db or session) or on the client side (cookie or localStorage).

in case of saving on the client side i suggest using HTML5’s localStorage so just save the selected index (or whatever you need) there and each time you need to reload the page just take the selected index from there and change the select.
here’s a sample how to save and get a variable in the client side:

function getFoo() {
  var foo = localStorage.getItem('foo');
  if (!foo) {
    setFoo([defaults value]);
    return getFoo();
  } else return foo;
}

function setFoo(foo) {
  localStorage.setItem('foo', foo);      
}