Как добавить onload в функцию onchange

#javascript #html

#javascript #HTML

Вопрос:

Заранее благодарю вас или любую помощь, которую вы можете предложить. Я создаю меню с выбором и параметрами. После выбора главы в ней отобразятся доступные параметры страницы. Однако я бы хотел, чтобы по умолчанию при первой загрузке веб-сайта отображались страницы первой главы, а не ничего не отображалось. Кажется, я не могу понять это. Код, который у меня есть, выглядит следующим образом:

 <script>
    window.onload = function() {
    document.getElementById("Chapter").onload = function () {
    if (this[this.selectedIndex].value === "1") {
    document.getElementById("c1").className = "show";
    }
};
</script>
<script>
    document.getElementById("Chapter").onchange = function () {
    if (this[this.selectedIndex].value === "1") {
    document.getElementById("c1").className = "show";
    } else {
        document.getElementById("c1").className = "";
    }
    if (this[this.selectedIndex].value === "2") {
        document.getElementById("c2").className = "show";
    } else {
        document.getElementById("c2").className = "";
    }
};
</script>

Код onload в настоящее время ничего не делает, но onchange работает так, как ожидалось.

Большое вам спасибо за ваше время.

Редактировать: пример HTML выглядит следующим образом:

 <div class="jump-options text-center">
    QUICK JUMP: CHAPTER 
        <select id="Chapter">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
        </select> PAGE 
        <select id="c1" name="Page">
            <option value="1p0">0</option>
            <option value="1p1">1</option>
            <option value="1p2">2</option>
            <option value="1p3">3</option>
            <option value="1p4">4</option>
            <option value="1p5">5</option>
        </select>
        <select id="c2" name="Page">
            <option value="2p0">0</option>
            <option value="2p1">1</option>
            <option value="2p2">2</option>
            <option value="2p3">3</option>
            <option value="2p4">4</option>
            <option value="2p5">5</option>
        </select>
</div>

1. Что это за элемент #Chapter ? Я думал load , что событие было только для оконных (и, возможно, оконных) элементов, но, конечно, не <select> для

2. К вашему сведению, вы можете просто использовать this.value вместо this[this.selectedIndex].value .

3. Не могли бы вы опустить вложенные onload и просто показать первую главу о загрузке страницы?

4. Я отредактировал, чтобы прикрепить пример HTML. при пропуске onload выбор страницы по-прежнему остается пустым для запуска.

5. Спасибо @Barmar, я внес изменения, чтобы немного очистить код.

Ответ №1:

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

Вы не хотите назначать onload обработчик, то, что вы хотите сделать, это запустить change событие #Chapter .

 window.onload = function() {
    document.getElementById("Chapter").dispatchEvent(new Event("change"));
}