Настраивание выпадающего меню HTML с помощью функции JavaScript

Question

Im пытается заполнить dropmenu, как описано в заголовке. На данный момент я имею этот код:

<form id="myForm"> 
<select id="selectNumber"> 
    <option>Choose a number</option> 
    <script> 
     var myArray = new Array("1", "2", "3", "4", "5"); 
     for(i=0; i<myArray.length; i++) { 
      document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>'); 
     } 
    </script> 
</select> 
</form> 

Это прекрасно работает, но у меня есть большое количество переменных в моем массиве, поэтому я хочу, чтобы поместить скрипт в файл яваскрипта как функцию, а затем вызвать его в html для эстетических целей.

Так это то, что я пытался в яваскрипта файле

function populate(){ 
    var myArray = new Array("1", "2", "3", "4", "5"); 
    for(i=0; i<myArray.length; i++) { 
     document.write('<option value="' + myArray[i] +'">' + myArray[i] + '</option>'); 
    } 
} 

А потом я пытался вызвать этот метод в HTML так:

<form id="myForm"> 
    <select id="selectNumber" onclick="populate()"> 
     <option>Choose a number</option> 
    </select> 
</form> 

и это не сработало, это просто привел новую страницу и номера, но не в выпадающем меню, чтобы выбрать.

Любые идеи о том, как исправить это были бы оценены

Answer 1

При использовании document.write() сценарий должен выполняться при загрузке страницы. Вы вызываете функцию с onclick, что явно не во время загрузки. Вместо вызова функции непосредственно:

<select id="selectNumber"> 
    <option>Choose a number</option> 
    <script> 
    populate(); 
    </script> 
</select> 

javascriptfile должен быть включен перед вызовом функции

Answer 2

Как сказано в комментарии, вы должны избегать document.write() и использовать комбинацию createElement/appendChild вместо этого.

Вы также могли бы избежать встроенный JS и использовать unobtrusive JS вместо:

var selectElement = document.getElementById('selectNumber'), 
 
    optionArray = [1, 2, 3, 4, 5]; 
 

 
function populateSelectElement (element, array) { 
 
    var newElement, 
 
     i; 
 
    for(i = 0; i < array.length; i += 1) { 
 
     newElement = document.createElement('option'); 
 
     newElement.textContent = optionArray[i]; 
 
     element.appendChild(newElement); 
 
    } 
 
} 
 
populateSelectElement(selectElement, optionArray);

<form id="myForm"> 
 
    <select id="selectNumber"> 
 
     <option>Choose a number</option> 
 
    </select> 
 
</form>

Тогда просто прикрепить обработчик события клика, как это:

selectElement.addEventListener('click', function() { 
    populateSelectElement(this, optionArray); 
});