如何实现select下拉选项选中后跳转至对应页面

首先先修正你现有代码的笔误：第三个学期选项的value属性和第二个选项重复，误写为semester 2，需要先改为semester 3，否则跳转逻辑会匹配错误。

你可以根据项目需求选以下任意一种实现方式： #

方案1：极简内联实现（无需额外JS文件） #

直接在select标签上绑定change事件，代码量最少，适合简单页面场景：

<main>
    <div class="container">
        <select 
            name="semester" 
            id="select-semester"
            onchange="if(this.value !== 'no-semester') window.location.href = this.value"
        >
            <option value="no-semester">select semester</option>
            <!-- 直接在value里填写对应学期页面的相对/绝对路径 -->
            <option value="./semester1.html">semester 1</option>
            <option value="./semester2.html">semester 2</option>
            <option value="./semester3.html">semester 3</option>
        </select>
    </div>
</main>

注意：option的value属性直接填写对应页面的访问地址即可，比如你的学期页面路径是/courses/sem/1，直接把value改成对应路径就行，不需要额外拼接后缀。

方案2：结构行为分离实现（推荐） #

把HTML结构和交互逻辑拆开，后续维护更方便，适合大多数项目场景：

1. HTML部分只保留结构，修正value错误并填写对应页面地址：

<main>
    <div class="container">
        <select name="semester" id="select-semester">
            <option value="no-semester">select semester</option>
            <option value="./semester1.html">semester 1</option>
            <option value="./semester2.html">semester 2</option>
            <option value="./semester3.html">semester 3</option>
        </select>
    </div>
</main>

2. 在页面末尾添加独立JS逻辑：

// 获取下拉框DOM元素
const semesterSelector = document.querySelector('#select-semester');
// 监听选中变化事件
semesterSelector.addEventListener('change', function() {
    const targetPath = this.value;
    // 选中默认提示选项时不触发跳转
    if (targetPath === 'no-semester') return;
    // 当前页跳转到对应学期页面
    window.location.assign(targetPath);
})

• 如果需要在新标签页打开学期页面，把跳转逻辑替换为window.open(targetPath, '_blank')即可
• 后续新增学期选项时，只需要在HTML里加对应的option标签、填对页面路径，不需要修改JS逻辑

内容的提问来源于stack exchange，提问作者Rakesh Singh