使用Javascript更改HTML下拉列表中的顯示項目

我正在爲Overwolf應用競賽（http://www.overwolf.com/nvidia-app-challenge/）和選項頁面創建應用，我希望能夠將選項存儲在localStorage中，以便我可以訪問它從任何頁面，隨時都可以。使用Javascript更改HTML下拉列表中的顯示項目

這是我的HTML頁面：

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
      <title>Battle Stats</title> 
      <link type="text/css" rel="stylesheet" href="style.css"> 
      <script type="text/javascript" src="windowManagement.js"></script> 
     <script> 
      function toggleDisabled(_checked) { 
       document.getElementById('warnValue').disabled = _checked ? true : false; 
      } 

      //init 
      var ddl = document.getElementById('options_class'); 
      var length = 5 
      for (var i = 0; i < length; i++){ 
       if (ddl.options[i].value == localStorage.getItem("options_playerClass")){ 
        ddl.options[i].selected = true; 
        break; 
       } 
      } 

      function setLocalStorageData() 
      { 
       var playerClass = ''; 
       playerClass = document.getElementById("options_class").value; 
       localStorage.setItem("options_playerClass", playerClass); 
       alert(localStorage.getItem("options_playerClass")); 
      } 
     </script> 
     </head> 
     <body> 
      <div onmousedown="dragResize('BottomRight');"> 
       <div id="content" onmousedown="dragMove();"> 
        <div class="outlined"> 
         <h1>Options</h1> 
         <form> 
          <p id="output"></p> 
          <input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br> 
          <input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning 
          <div class="optionInner"> 
           <p> Warn me at: 
            <input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue"> 
           </p> 
           <p>Class: 
            <select name="options_class" id="options_class" class="optionValue"> 
             <option value="smg">SMG</option> 
             <option value="plasma">Plasma Bomber</option> 
             <option value="medic">Medic</option> 
             <option value="rail">Rail</option> 
             <option value="tesla">Tesla</option> 
            </select> 
           </p> 
          </div> 
         </form> 
        </div> 
        <p><a href="index.html" class="actionButton Left">Close</a><span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p> 
       </div> 
      </div> 
     </body> 
    </html>

的錯誤信息是：

Uncaught TypeError: Cannot read property 'options' of null

任何幫助表示讚賞！

來源

2015-11-11 Steven

在加載DOM之前加載了您的JavaScript。

<!DOCTYPE html> 
 
    <html> 
 
     <head> 
 
      <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
 
      <title>Battle Stats</title> 
 
      <link type="text/css" rel="stylesheet" href="style.css"> 
 
      <script type="text/javascript" src="windowManagement.js"></script> 
 
     
 
     </head> 
 
     <body> 
 
      <div onmousedown="dragResize('BottomRight');"> 
 
       <div id="content" onmousedown="dragMove();"> 
 
        <div class="outlined"> 
 
         <h1>Options</h1> 
 
         <form> 
 
          <p id="output"></p> 
 
          <input type="checkbox" name="options_battleStats" value="Battle Stats">Show Battle Stats<br> 
 
          <input type="checkbox" name="options_healthWarning" value="Health Warning" onchange="toggleDisalbled(this.checked);">Low Health Warning 
 
          <div class="optionInner"> 
 
           <p> Warn me at: 
 
            <input type="number" name="points" min="0" max="100" step="10" value="30" class="optionValue" id="warnValue"> 
 
           </p> 
 
           <p>Class: 
 
            <select name="options_class" id="options_class" class="optionValue"> 
 
             <option value="smg">SMG</option> 
 
             <option value="plasma">Plasma Bomber</option> 
 
             <option value="medic">Medic</option> 
 
             <option value="rail">Rail</option> 
 
             <option value="tesla">Tesla</option> 
 
            </select> 
 
           </p> 
 
          </div> 
 
         </form> 
 
        </div> 
 
        <p><a href="index.html" class="actionButton Left">Close</a><span class="actionButton Middle" onclick="setLocalStorageData();">Save</p></p> 
 
       </div> 
 
      </div> 
 
<script> 
 
      function toggleDisabled(_checked) { 
 
       document.getElementById('warnValue').disabled = _checked ? true : false; 
 
      } 
 

 
      //init 
 
      var ddl = document.getElementById('options_class'); 
 
      var length = 5 
 
      for (var i = 0; i < length; i++){ 
 
       if (ddl.options[i].value == localStorage.getItem("options_playerClass")){ 
 
        ddl.options[i].selected = true; 
 
        break; 
 
       } 
 
      } 
 

 
      function setLocalStorageData() 
 
      { 
 
       var playerClass = ''; 
 
       playerClass = document.getElementById("options_class").value; 
 
       localStorage.setItem("options_playerClass", playerClass); 
 
       alert(localStorage.getItem("options_playerClass")); 
 
      } 
 
     </script> 
 
     </body> 
 
    </html>

來源

2015-11-11 20:15:48

我覺得像這樣的傻瓜現在。謝謝！ – Steven

@Steven np。我們有時會遇到「未加載」的問題。祝你工作順利。 –

JavaScript在dom對象加載之前得到執行。將整個腳本塊放在頁面末尾：

<script type="text/javascript"> 
//All your code here 
</script> 
</body> 
</html>

來源

2015-11-11 20:10:24

使用Javascript更改HTML下拉列表中的顯示項目

回答

相關問題