javascript選擇菜單動態添加項目中的項目

大家好，感謝您對我的第一篇文章的幫助。javascript選擇菜單動態添加項目中的項目

我正在做一些工作學習JavaScript，我給自己做了一個輸入文本框，一個按鈕和一個選擇框的創建頁面的練習。我創建了一個數組來保存文本字段中的輸入項，並構建了一個函數來檢查數組是否已經包含該項。

我想要做的是將選擇框動態更新爲包含新輸入項，因爲它們被輸入到數組中。目前，我可以讓選擇框更新，但最終會在選擇框中出現重複項目。我想阻止這種情況發生。任何人都可以提出最好的方法嗎？我從另一個堆棧溢出文章here得到了下面的代碼。對任何錯誤警報或註釋部分抱歉。我一直在使用它來測試。

<!DOCTYPE html> 
<html> 

<head> 
    <title>Keeper of Time</title> 

    <link rel="stylesheet" type="text/css" href="kot.css"> 

</head> 

<body> 

    <div class="navDiv"> 

     <ul id="navButtons"> 
      <li><a href="">Home</a></li> 
      <li><a href="">Clients</a></li> 
      <li><a href="">Entries</a></li> 
      <span><li><a href="">Account</a></li></span> 

     </ul> 
    </div> 


    <div id="newCltDiv"> 

     <input id="newClt" type="text" placeholder="Add a new client"> 
     <button id="addCltBtn"> Add Client</button> 

    </div> 

    <br> 
    <br> 

    <div id="cltListDiv"> 
     <select id="cltList"> 
      <option>Select an existing client</option> 
     </select> 

    </div> 


    <br> 
    <br> 

    <div id="test"></div> 



    <script type="text/javascript"> 
     var clientArray = []; 
     var clientInput = document.getElementById("newClt"); 
     var sel = document.getElementById("cltList"); 

     document.getElementById("addCltBtn").onclick = function() { 

      console.log(clientArray.length); 
      if (!contains(clientArray, clientInput.value)) { 
       clientArray.push(clientInput.value); 
       console.log("Objects: " + clientArray.join(", ")); 
       updateDropList(); 
      } else alert("You already have a client by that name!"); 
     } 


     function updateDropList() { 
      for (var i = 0; i < clientArray.length; i++) { 
       var opt = document.createElement('option'); 
       opt.innerHTML = clientArray[i]; 
       opt.value = clientArray[i]; 
       sel.appendChild(opt); 
      } 
     } 



     /* 
       clientArray.push("soccer"); 

       if(contains(clientArray, "soccer")){ 
        alert("the array contains soccer"); 
       } 
       */ 

     function contains(a, obj) { 
      for (var i = 0; i < a.length; i++) { 
       if (a[i] === obj) { 
        return true; 
       } 

      } 
      return false; 
     } 
    </script> 


</body> 

</html>

來源

2015-05-01 Panayiotis Spanos

這是因爲你每次都在循環瀏覽整個clientArray。

試試這個：

function updateDropList() { 
    var lastKey = clientArray.length-1; 
    var opt = document.createElement('option'); 
    opt.innerHTML = clientArray[lastKey]; 
    opt.value = clientArray[lastKey]; 
    sel.appendChild(opt); 
}

http://jsfiddle.net/cL61jhuo/

來源

2015-05-01 08:36:46

工作就像一個魅力。我明白你的意思了。感謝那。總而言之，不是遍歷數組的每個元素，而是僅僅追加。再次感謝你！ –

我不建議將'clientArray'中的值捕獲出來，而是建議將'clientInput.value'作爲參數傳遞給'updateDropList（）'，如[更新的小提琴]所示（http://jsfiddle.net/geary/ cL61jhuo/1 /）。 –

javascript選擇菜單動態添加項目中的項目

回答

相關問題