求带下拉菜单的无错误简单重定向代码：提交后跳转对应页面

你的代码存在几个明显问题：

1. 重复绑定表单提交事件（定义了OnSubmitForm函数却未使用，又额外添加了另一个提交事件处理逻辑）
2. 最后一个else语句语法错误，错误地在else后加了括号和条件判断（正确写法应为else，无需附加条件）
3. 通过逐个检查选项ID的方式冗余且低效，可优化为直接获取下拉框选中值

以下是修正后的完整可运行代码：

<body>
    <form name="myform" id="myForm">
        <select id="fruitSelect">
            <option value="apple">Apple</option>
            <option value="orange">Orange</option>
            <option value="pineapple">Pineapple</option> 
            <option value="banana" selected>Banana</option>
        </select>
        <p>
            <input type="submit" name="submit" value="save">
        </p>
    </form>

    <script type="text/javascript">
        document.getElementById("myForm").addEventListener("submit", function(e) {
            e.preventDefault(); // 阻止表单默认提交行为
            const selectedFruit = document.getElementById("fruitSelect").value;
            // 跳转到对应小写名称的HTML页面
            location.href = `${selectedFruit}.html`;
        });
    </script>
</body>

核心优化点： #

• 给下拉框添加id="fruitSelect"，简化元素获取逻辑
• 为每个<option>设置value属性，值直接对应目标页面的文件名，无需逐个判断选项
• 移除冗余的OnSubmitForm函数，只保留一套清晰的提交事件处理逻辑
• 使用模板字符串拼接跳转URL，代码更简洁易维护
• 修复原代码中的语法错误

修改后，选择任意水果选项并点击提交按钮，页面会自动跳转到对应名称的HTML页面（如选择Apple则跳转至apple.html）。

内容的提问来源于stack exchange，提问作者Álvaro