根据下拉选择加载新页面

Load a new page based on dropdown selection

本文关键字：加载 新页面 选择      更新时间：2023-09-26

我有这个HTML代码，其中有一些链接：

<select name="menu1" id="menu1">
  <option value="http://www.espn.com">ESPN</option>
  <option value="http://www.cnn.com">CNN</option>
  <option value="http://www.abcnews.com">ABC</option>
  <option value="http://www.cbsnews.com">CBS</option>
  <option value="http://www.foxnews.com">FOX</option>
</select>

和这个JavaScript:

var urlmenu = document.getElementById( 'menu1' );
urlmenu.onchange = function() {
  window.open( this.options[ this.selectedIndex ].value );
};

我希望链接在同一页面上打开，但它们当前在一个新窗口中打开。如何使它们在同一页上打开？

您可以使用window.location = "http://www.example.com"转到另一个链接（信息）

<script type="text/javascript">
var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function () {
    window.location = this.options[this.selectedIndex].value;
};
</script>

演示：

<html>
<head>
</head>
<body>
  <select name="menu1" id="menu1">
    <option value="http://www.espn.com" [1]>ESPN</option>
    <option value="http://www.cnn.com">CNN</option>
    <option value="http://www.abcnews.com">ABC</option>
    <option value="http://www.cbsnews.com">CBS</option>
    <option value="http://www.foxnews.com">FOX</option>
  </select>
  <script type="text/javascript">
    var urlmenu = document.getElementById('menu1');
    urlmenu.onchange = function() {
      window.location = this.options[this.selectedIndex].value;
    };
  </script>
</body>
</html>

open()总是打开一个新窗口（或一个新选项卡，具体取决于您的浏览器）。

相反，设置当前窗口的location：

urlmenu.onchange = function() {
  window.location.href = this.options.value;
};

（请注意，您不再需要通过options[selectedIndex]查找值-<select>元素本身的value即可）

var urlmenu = document.getElementById('menu1');
urlmenu.onchange = function() {
  document.location.href = this.value;
};
<select name="menu1" id="menu1">
  <option>Choose:</option>
  <option value="http://www.espn.com">ESPN</option>
  <option value="http://www.cnn.com">CNN</option>
  <option value="http://www.abcnews.com">ABC</option>
  <option value="http://www.cbsnews.com">CBS</option>
  <option value="http://www.foxnews.com">FOX</option>
</select>

根据w3:window.open()打开一个新窗口；window.location.assign()方法加载一个新文档。

所以使用window.location.assign()。示例

相关文章：