Блог

Я написал некоторый код javascript, который должен помещать параметры в поле выбора. Код поля выбора приведен ниже:

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

В моем кодировании на javascript у меня есть метод под названием populateDays, который должен заполнять поле выбора 7 параметрами — по одному на каждый день недели. Код для этого приведен ниже:

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

Позже в скрипте я вызываю этот метод. Я знаю, что браузер запускает код javascript при загрузке браузера, потому что я поместил инструкцию alert () внутри метода populateDays, и она появилась при загрузке страницы.

 populateDays();
  

По какой-то причине, когда я загружаю страницу, поле выбора полностью пусто. Почему метод populateDays () не загружает это поле выбора с параметрами?

Эмм, это должно работать просто отлично. Если это не так:

Способ 2 (пример jsFiddle) — 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;
}
  

Способ 3 — создание элементов программно

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

У меня были проблемы с этим в IE8 с новой опцией — это работало в любом другом браузере. В итоге я заменил его следующим, и это работало везде,

 selectBox.append("<option value=""   value   "">"   text   "</option>");
  

Похоже, у brymck это уже есть. У меня возникла проблема с этим при открытии страницы. Так что это может кому-то помочь:

Я думаю, что javascipt загружается до того, как может появиться селектор. Я поместил свой код в блок jquery document ready, и затем все начало работать.

В теле:

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

И это js, который я поместил в тег в заголовке:

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

});