Javascript 如何向onchange函数添加onload

提前感谢您或您能提供的任何帮助。我正在创建一个包含选项和选项的菜单。选择章节后，它将显示可用的页面选项。但是，我希望它默认在网站首次加载时显示第一章页面，而不是什么都不显示。我似乎无法理解这一点。我的守则如下：

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

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

window.onload=函数（）{
document.getElementById（“章”）.onload=函数（）{
如果（此[this.selectedIndex].value==“1”）{
document.getElementById（“c1”）.className=“show”；
}
};
document.getElementById（“章”）.onchange=function（）{
如果（此[this.selectedIndex].value==“1”）{
document.getElementById（“c1”）.className=“show”；
}否则{
document.getElementById（“c1”）.className=“”；
}
如果（此[this.selectedIndex].value==“2”）{
document.getElementById（“c2”）.className=“show”；
}否则{
document.getElementById（“c2”）.className=“”；
}
};

onload代码目前不执行任何操作，但onchange按预期工作

非常感谢您抽出时间

编辑： 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>

<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.
2.
3.
4.
5.
6.
7.
页
0
1.
2.
3.
4.
5.
0
1.
2.
3.
4.
5.

大多数DOM元素没有

onload

事件。此事件仅在需要从外部源（如图像和iFrame）获取其内容的元素上触发

您不想分配一个

onload

处理程序，您要做的是触发

#Chapter

上的

change

事件

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

---

大多数DOM元素没有

onload

事件。此事件仅在需要从外部源（如图像和iFrame）获取其内容的元素上触发

您不想分配一个

onload

处理程序，您要做的是触发

#Chapter

上的

change

事件

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

---

什么样的元素是

#Chapter

？我认为

加载
事件只适用于窗口（可能是类似窗口的）元素，但肯定不是
sFYI，您可以使用
this.value
而不是
this[this.selectedIndex].value
。难道你不能省略嵌套的
onload
，并简单地显示页面加载的第一章吗？我已经编辑了附加一个HTML示例。省略onload仍然会使页面选择空白。谢谢@Barmar，我做了一些更改来清理代码。什么样的元素是
#chapter
load
事件仅适用于窗口（可能是类似窗口的）元素，但肯定不是
sFYI，您可以使用
this.value
而不是
this[this.selectedIndex].value
。难道你不能省略嵌套的
onload
，并简单地显示页面加载的第一章吗？我已编辑以附加一个HTML示例。省略onload仍然会使页面选择空白。谢谢@Barmar，我已经做了一些更改来清理代码。你是一个幸运的人，谢谢！它可以根据需要工作。：）你是祝福，谢谢！它可以根据需要工作。：）