使用Javascript在HTML中刷新後保留選項

我試圖在使用本地存儲進行刷新後在HTML中保留選定的選項。我跟着提到的例子here 下面是我的代碼。使用Javascript在HTML中刷新後保留選項

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>

遺憾的是此設置不保留在刷新後所選擇的選項。有什麼建議嗎？

來源

2016-12-15 Joseph Wahba

您是否在DOM加載後運行JS？ – theonlygusti

我正在擴展現有的代碼庫。不太確定 –

'getElementById（「selectedtem」）'正在尋找HTML中不存在的'id'。你的意思是'getElementById（「interface-output」）'？ –

<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>

來源

2016-12-15 22:51:46 manonthemat

我試過了，但是當我刷新時它給了我這個錯誤：未捕獲的typeerror無法讀取null的屬性'選項' –

我也爲select添加了一個id。你可以複製和粘貼所有這些在一個新的文件，並用你的瀏覽器打開它？ – manonthemat

謝謝你解決了這個問題。做得好！ –

使用Javascript在HTML中刷新後保留選項

回答

相關問題