1

I have written some javascript code that's supposed to put options into a select box. The select box's code is below:

<select id="dayOfTheWeek" name="dayOfTheWeek"></select>

In my javascript coding, I have a method called populateDays that's supposed to fill the select box with 7 options - one for each day of the week. The code for it is below:

function populateDays() {
var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
var dayOfWeek = document.getElementById("dayOfTheWeek");
var today = (new Date()).getDay();

for (var i = 0; i < days.length; i++) {
    var length = dayOfWeek.options.length;
    dayOfWeek.add(new Option(days[i], i), length);
}
dayOfWeek.selectedIndex = today;
}

Later on in the script I make a call to this method. I know that the browser runs the javascript code when the browser loads because I put an alert() statement inside of the populateDays method and it appeared as I loaded the page.

populateDays();

For some reason, when I load the page, the select box is completely empty. Why does the populateDays() method not load that select box with the options?

idungotnosn
  • 2,001
  • 4
  • 29
  • 36

3 Answers3

1

Sounds like brymck got this one already. I was having a problem doing this when bringing up the page. So this may help someone:

I think the javascipt is loaded before the selector can come in. I put my code inside a jquery document ready block and then everything started working.

In the body:

<select id="selector1" >
        </select>

And this is the js I placed in the tag in the head:

var optionArr = ["option1", "option2", "option3", "option4"];

$(document).ready(function(){

    //add array of csv file names to selector element
    var sel = document.getElementById("selector1");

    for(i=0; i < csvFilesArr.length; i++){
        //opt += "<option>" + optionArr[i] + "</option>"
        var option = document.createElement("option");
        option.text = optionArr[i];
        sel.add(option);
    }

});
jeffski13
  • 581
  • 5
  • 6
1

I had issues with this in IE8 with new Option - it worked in every other browser. I ended up replacing it with the following and it worked everywhere,

selectBox.append("<option value=\"" + value + "\">" + text + "</option>");
Wes Grant
  • 2,044
  • 16
  • 14
1

Erm, it should work just fine. If it doesn't:

Method 2 (jsFiddle example) - innerHTML

function populateDays() {
  var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
  var dayOfWeek = document.getElementById("dayOfTheWeek");
  var today = (new Date()).getDay();
  var options = "";

  for (var i = 0; i < days.length; i++) {
    options += '<option value="' + days[i] + '">' + days[i] + '</option>'
  }

  dayOfWeek.innerHTML = options;
  dayOfWeek.selectedIndex = today;
}

Method 3 - creating elements programmatically

function populateDays() {
  var days = [ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ];
  var dayOfWeek = document.getElementById("dayOfTheWeek");
  var today = (new Date()).getDay();

  for (var i = 0; i < days.length; i++) {
    var option = document.createElement("option");
    option.value = days[i];
    var optionText = document.createTextNode(days[i]);
    option.appendChild(optionText);
    dayOfWeek.appendChild(option);
  }

  dayOfWeek.selectedIndex = today;
}
brymck
  • 7,555
  • 28
  • 31