Меню выбора 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 динамически добавляет элементы из массива

ответ

Смежные вопросы