使用 HTML 选择下拉菜单更新 iframe 的 src 路径答案

【问题标题】：Updating src path of an iframe using a HTML select dropdown使用 HTML 选择下拉菜单更新 iframe 的 src 路径
【发布时间】：2019-10-10 02:42:53
【问题描述】：

我正在尝试使用 HTML 表单元素（特别是选择下拉菜单）来更新嵌入在页面上的 iframe 的 URL 路径。这应该会在每次进行不同的选择时重新加载 iframe。

我已经尝试使用 Javascript 函数在 onkeyup 或 onmouseup 事件发生时传递 select 的值，但我没有看到发生这种情况时发生任何变化：

<!DOCTYPE html>

<head>

<style>

* {font-family: arial;}

</style>
<script type="text/javascript">

window.onload = function() {
  document.monthyear.onkeyup = my;
  document.monthyear.onmouseup = my;

};

function my() {

var my = String(document.monthyear.value);

document.getElementById("iframe").src = my;

};

</script>

</head>

<body>

<select name="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>

【问题讨论】：

你使用document.getElementById("my").value，但是哪里有id为"my"的元素？
抱歉，现已编辑。

标签： javascript html forms drop-down-menu src

【解决方案1】：

尝试这样使用：

 <select onchange='this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);'>
  <a href='#'><option>choose an action</option></a>
  <option value='Url or div'>Option 1</option>
  <option value='Url or div'>Option 2</option>

  </select>

【讨论】：

【解决方案2】：

使用selected属性设置select标签的默认值，然后（见代码中的cmets）...

<script>
const select = document.querySelector('#select')
window.onload = function() {
  // set the iframe value to default select value
  document.getElementById("iframe").src = '/258001'
};
// add an event listener that listens for a change to the input and sets the iframe path.
select.addEventListener('change', (e) => {
 document.getElementById("iframe").src = e.target.value
document.getElementById("iframe").contentWindow.location.reload()
})

</script>

</head>

<body>

<select id="select" name="monthyear">
    <option value="/258001" selected="selected">
        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>

【讨论】：

这不会在下拉菜单中选择另一个选项后重新加载 iframe？
不，抱歉，仍然不起作用：未捕获的类型错误：无法在 stack.html:10 处读取 null 的属性“addEventListener”
它对我有用。我的猜测是您没有将“选择”ID 添加到 HTML 选择元素中。这是一个工作示例，复制并粘贴了我的答案中的代码：codepen.io/sodapop/pen/YzzXvbo?editors=1111
很奇怪。即使我完全复制代码并将包裹在它周围并保存在一个文件中，我也无法让它工作。不过可以在 Codepen 上使用。
你能发布你现在拥有的东西吗？我很乐意看看。