Select меняет содержимое

Рейтинг: 1Ответов: 1Опубликовано: 22.04.2015

Делаю так:

<div id="box"></div>
<script>
  var shouts = {
    1: "Day",
    2: "Day",
    3: "Day",
    4: "Week",
    5: "Week"

  };

  function shoutbox(select) {
    var selected = select.options[select.selectedIndex];

    if (selected.value in shouts) {

      document.getElementById("box").innerHTML = shouts[selected.value];
    } else {

      document.getElementById("box").innerHTML = "Day";
    }
  }
</script>

    <select id="calc" class="calc_cell">
                    <option selected value="1">Day</option>
                    <option value="2">Day</option>
                    <option value="3">Day</option>
                    <option value="4">Week</option>
                    <option value="5">Week</option>
                </select>

Работает только когда делаешь выбор в селект, а при загрузке страницы в div пусто, как заставить отображаться сразу же?

javascript select
Источник: Stack Overflow на русском

Ответы

▲ 4Принят

После объявления функции её нужно вызывать (jsFiddle):

function shoutbox(select) {
    var selected = select.options[select.selectedIndex];

    if (selected.value in shouts) {

        document.getElementById("box").innerHTML = shouts[selected.value];
    } else {

        document.getElementById("box").innerHTML = "Day";
    }
}

shoutbox(document.getElementById("calc"));

Вызов функции необходимо осуществлять после блока select или на событии DOMContentLoaded