Populating a HTML dropdown menu through a JavaScript function

Question

Im trying to populate a dropmenu as described in the heading. At the moment I've this code:

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

This works fine, but I have a large amount of variables in my array, so i want to put the script in a javascript file as a function and then call it in the html for aesthetic purposes.

So this is what i tried in the javascript file

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>');
    }
}

And then I tried to call that method in the HTML like so :

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

and this didn't work it just brought a new page and the numbers , but not in a dropdown menu to select from.

Any ideas on how to fix it would be much appreciated

Don't use document.write at all. It's used for very specific purposes and not often. You need document.createElement, appendChild in this case. — dfsq
– dfsq, Commented Jan 4, 2015 at 20:12

Josh Crozier · Accepted Answer · 2015-01-04 20:35:22Z

1

As said in the comments, you should avoid document.write() and use a combination of createElement/appendChild instead.

You could also avoid inline JS and use unobtrusive JS instead:

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>

Then just attach a click event handler like this:

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

edited Jan 4, 2015 at 20:35

answered Jan 4, 2015 at 20:16

Josh Crozier

242k56 gold badges401 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Fuzzyma · Accepted Answer · 2015-01-04 20:07:11Z

0

When using document.write() the script has to be executed while loading the page. You call the function with onclick which is obviously not while loading. Instead call the function directly:

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

The javascriptfile has to be included before the function call

answered Jan 4, 2015 at 20:07

Fuzzyma

8,6686 gold badges32 silver badges69 bronze badges

Collectives™ on Stack Overflow

Populating a HTML dropdown menu through a JavaScript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related