原生JS中Select标签事件处理器未触发问题排查

核心问题 #

1. 事件处理器绑定错误：你直接调用了loadPost(period.value)并将返回值（undefined）传给addEventListener，导致函数仅在页面加载时执行一次，而非在下拉选项变化时触发。
2. Switch条件不匹配：你用字符串类型的选中值（如"day"）和DOM元素对象（如day）做比较，两者永远不会相等，导致切换逻辑失效。

修复后的代码 #

JavaScript 代码

document.addEventListener('DOMContentLoaded', function() {
    const day = document.getElementById("day");
    const week = document.getElementById("week");
    const month = document.getElementById("month");
    const periodSelect = document.getElementById("filter");

    function loadPost(selectedPeriod) {
        // 隐藏所有内容区块
        day.style.display = "none";
        week.style.display = "none";
        month.style.display = "none";

        // 根据选中值显示对应区块
        switch(selectedPeriod) {
            case "day":
                day.style.display = "block";
                break;
            case "week":
                week.style.display = "block";
                break;
            case "month":
                month.style.display = "block";
                break;
        }
        console.log(selectedPeriod);
    }

    // 绑定下拉框变化事件
    periodSelect.addEventListener("change", function() {
        loadPost(this.value);
    });

    // 页面加载时初始化显示默认选中的内容
    loadPost(periodSelect.value);
});

HTML 代码（无需修改，若需指定默认选中项可添加selected属性）

<div class="most-popular">
    <h1>Most Popular</h1>
    <label for="most-popular-filter">Filter:</label>
    <select name="most-popular-filter" id="filter">
        <option value="day" selected>Day</option> <!-- 可选：显式设置默认选中 -->
        <option value="week">Week</option>
        <option value="month">Month</option>
    </select>
    <div class="content-box" id="day">
        <img src="images/placeholder.png" alt="most-popular">
        <h2>Most Popular 1</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
    </div>
    <div class="content-box" id="week">
        <img src="images/placeholder.png" alt="most-popular">
        <h2>Most Popular 2</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
    </div>
    <div class="content-box" id="month">
        <img src="images/placeholder.png" alt="most-popular">
        <h2>Most Popular 3</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quae.</p>
    </div>      
</div>

关键修复点说明 #

• 事件绑定修正：使用匿名函数包裹loadPost调用，确保仅在下拉选项变化时执行函数，而非页面加载时立即执行。
• Switch逻辑修正：直接根据选中的字符串值（如"day"）匹配对应的DOM元素，确保显示逻辑正确。
• DOM加载安全：将代码包裹在DOMContentLoaded事件中，确保所有HTML元素渲染完成后再执行JS，避免获取元素为null的问题。
• 初始化显示：页面加载时主动调用loadPost，确保默认选中的内容区块正常显示。

内容的提问来源于stack exchange，提问作者İsmail Mert Tarihçi