如何使用HTML下拉选择框更新iframe的src路径？

你的代码没生效主要有几个关键问题，我帮你逐一修复并解释：

问题分析 #

1. 错误的事件绑定：下拉选择框的选择变化应该用onchange事件，而不是onkeyup或onmouseup——这两个事件根本不会在用户选择下拉选项时触发。
2. URL路径拼接错误：你的选项值是相对路径（比如/258001），直接赋值给iframe的src会导致浏览器在当前域名下找这个路径，而不是你原本的目标域名下。
3. 元素获取的稳定性问题：用document.monthyear依赖全局命名空间，不如给下拉框加个ID，获取元素更稳妥。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        * {font-family: arial;}
    </style>
    <script type="text/javascript">
        window.onload = function() {
            // 获取下拉框元素，用ID更可靠
            const selectElement = document.getElementById('monthyear');
            // 绑定change事件，选项变化时触发
            selectElement.addEventListener('change', updateIframeSrc);
        };

        function updateIframeSrc() {
            const baseUrl = 'https://www.example.com';
            // 获取当前选中的选项值
            const selectedPath = this.value;
            // 拼接完整URL并赋值给iframe
            document.getElementById("iframe").src = `${baseUrl}${selectedPath}`;
        };
    </script>
</head>
<body>
    <!-- 给下拉框添加ID，方便获取 -->
    <select name="monthyear" id="monthyear">
        <option value="/258001">January 2019</option>
        <option value="/258002">February 2019</option>
        <option value="/258003">March 2019</option>
        <option value="/258004">April 2019</option>
    </select>
    <h1>Month</h1>
    <iframe allowfullscreen frameborder="0" height="450" id="iframe" src="https://www.example.com/258001" style="border:0" width="800"></iframe>
</body>
</html>

关键修改点说明 #

• 事件替换：把onkeyup/onmouseup换成change事件，这是下拉框选择变化的标准触发事件，用户每次选中新选项都会立刻执行函数。
• URL拼接：新增baseUrl变量，把它和选项的相对路径拼接成完整的URL，确保iframe加载的是目标域名下的页面。
• 元素获取优化：给下拉框添加id="monthyear"，用getElementById获取元素比依赖全局name属性更稳定，也更符合现代JS写法。
• 使用addEventListener：相比直接赋值onchange，addEventListener允许绑定多个事件处理函数，代码更灵活。

这样修改后，你每次选择不同的月份选项，iframe就会自动加载对应的页面了。

内容的提问来源于stack exchange，提问作者J. Ayo