Keep option after a refresh in HTML using Javascript

Question

I'm trying to keep the selected option in HTML after doing a refresh using local storage. I followed the example mentioned here Below is my code.

document.getElementById("interface-output").onchange = function() {
  localStorage.setItem('selectedtem', document.getElementById("interface-output").value);
};

if (localStorage.getItem('item')) {
  document.getElementById("selectedtem").options[localStorage.getItem('selectedtem')].selected = true;
}

<div class="row" id="ott-redirect-interface-selector">
  <label>Output Interface</label><br>
  <select id="interface-output" class="browser-default">
    <option value="select">Select an interface</option>
    <option value="eth0">eth0</option>
    <option value="eth1">eth1</option>
  </select>
</div>

Unfortunately this setting doesn't preserve the selected option after a refresh. Any suggestions please ?

getElementById("selectedtem") is looking for an id that doesn't exist in your HTML. Did you mean getElementById("interface-output")? — Paul Roub
– Paul Roub, Commented Dec 16, 2016 at 19:56

manonthemat · Accepted Answer · 2016-12-16 19:14:49Z

5

<html>
  <body>
    <div class="row" id="ott-redirect-interface-selector">
      <label>Output Interface</label><br>
      <select id="interface-output" class="browser-default">
        <option id="select" value="select">Select an interface</option>
        <option id="eth0" value="eth0">eth0</option>
        <option id="eth1" value="eth1">eth1</option>
      </select>
    </div>
    <script>
      document.getElementById('interface-output').onchange = function() {
        localStorage.setItem('selectedtem', document.getElementById('interface-output').value);
      };

      if (localStorage.getItem('selectedtem')) {
        document.getElementById('interface-output').options[localStorage.getItem('selectedtem')].selected = true;
      }
    </script>
  </body>
</html>

edited Dec 16, 2016 at 19:14

answered Dec 15, 2016 at 22:51

manonthemat

6,2712 gold badges29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Wahba Over a year ago

I tried so but it gives me this error when I do the refresh: uncaught typeerror cannot read property 'options' of null

manonthemat Over a year ago

I added an id for select, too. Can you copy & paste all of this in a new file and open it with your browser?

abhijeetThakur Over a year ago

I have a php form containing this dropdown, Now the form is not getting submitted. Any possible reason?

Collectives™ on Stack Overflow

Keep option after a refresh in HTML using Javascript

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related