javascript - 如何使用 Select 导航到 URL？

Question

我想在带有选择框的网站上导航。当用户更改选择选项时，它会打开该选项的 url。

这是我的选择:

<select id="navigation">
   <option value="/" selected>start</option>
   <option value="/thoughts">thoughts</option>
   <option value="/work">work</option>
   <option value="/methods">methods</option>
</select>

这是我的 JavaScript:

document.getElementById("navigation").onchange = function() {
  var selectedOption = this.value;
  window.location.href = "http://niklasjordan.com" + selectedOption;
}

但是这段代码不起作用。有人知道为什么吗？

Answer 1

假设您使用的是普通 Javascript，请将代码放入此函数中:

var domReady = function(callback) {
    document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};

domReady(function() {
    document.getElementById("navigation").onchange = function() {
        var selectedOption = this.value;
        window.location.href = "http://niklasjordan.com" + selectedOption;
    }
});

(仅适用于IE9及以上版本)

简短说明:您必须等待 DOM 完全加载才能操作它!