Question

预先感谢您或您可以提供的任何帮助。我正在建立一个包含选择和选项的菜单。选择章节后，它将显示可用的页面选项。但是，我希望默认情况下在网站首次加载时显示第一章页面，而不显示任何内容。我似乎无法弄清楚这一点。我的代码如下：

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

Answer 1

大多数DOM元素没有onload事件。此事件仅对需要从外部源（例如图像和iframe）获取其内容的元素触发。

您不想分配onload处理程序，您要做的是在change上触发#Chapter事件。

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

如何将onload添加到onchange函数

1 个答案: