title: How to set a select option dropdown from localStorage
body: <p>I have a select option dropdown with a default set that has no value, is disabled, and set as selected. The first time a person runs through the form they pick their selection. The selection is saved to local storage. They run through some questions then are reverted back to that initial form where all types input values set to hold the values saved in localStorage. However, I am having trouble setting the select option dropdown to the value that was saved in the local storage. I also have a button that allows the person to clear the session, thus reseting all the form fields. Below is a sample of the code.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="gender" name="gender" required="" aria-required="true"&gt;
      &lt;option value="" disabled selected&gt;Choose your gender&lt;/option&gt;
      &lt;option value="Male"&gt;Male&lt;/option&gt;
      &lt;option value="Female"&gt;Female&lt;/option&gt;
  &lt;/select&gt;
  &lt;label&gt;Gender&lt;/label&gt;
  </code></pre>
  
  <p>JavaScript to save selected value to local storage:</p>
  
  <pre><code> var gender = document.getElementById("gender");
   localStorage.setItem('gender', gender.options[gender.selectedIndex].value);
  </code></pre>
  
  <p>JavaScript to set select option dropdown once the value is already saved, where the problem is:</p>
  
  <pre><code>document.getElementById("gender").value = localStorage.getItem('gender');
  // Or this one, neither seem to work
  $("#gender").val(localStorage.getItem("gender"));
  </code></pre>
  
  <p>Any ideas on how I can solve this?</p>
  
  <p>**Update: After looking a little further, I just found that it is changing the value of the first option from "" to "Male" instead of selecting the option that has Male set as its value. But I still can't figure out how to fix it.</p>