重定向选择框中的选择选项

Question

目前我正在使用这个：

 <select ONCHANGE="location = this.options[this.selectedIndex].value;">

它将我重定向到选项值内的位置。但它没有按预期工作.. 意味着如果我单击选择的第一个选项，则 onChange 操作不会运行。我在考虑 javascript，但我认为你们会有一些更好的建议。那么，如果我单击每个选项，它会将我重定向到它的值，我该如何让它工作呢？

原文由 Lucas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

因为已经选择了第一个选项，所以永远不会触发 change 事件。添加一个空值作为第一个值，并在位置分配中检查是否为空。

这是一个例子：

https://jsfiddle.net/bL5sq/

 <select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="">Select...</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
</select>

原文由 margusholland 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我强烈建议从内联 JavaScript 转移到类似以下的内容：

 function redirect(goto){
    var conf = confirm("Are you sure you want to go elswhere?");
    if (conf && goto != '') {
        window.location = goto;
    }
}

var selectEl = document.getElementById('redirectSelect');

selectEl.onchange = function(){
    var goto = this.value;
    redirect(goto);

};

JS Fiddle 演示（404 linkrot 受害者） 。

通过 Wayback Machine 的 JS Fiddle 演示。

为当前用户分叉 JS Fiddle 。

在 JS Fiddle 的标记中，第一个选项没有分配任何值，因此单击它不应触发函数执行任何操作，并且由于它是默认值，因此单击 select 然后首先选择它默认 option 无论如何都不会触发 change 事件。

更新：

最新示例 (2017-08-09) 的重定向 URL 需要换出，因为 JS Fiddle 和两个域之间的混合内容存在错误，而且两个域都需要对框架内容使用“同源”。 - 阿尔伯特

原文由 David Thomas 发布，翻译遵循 CC BY-SA 3.0 许可协议