下拉选择表单，提交时转到 URL

Question

有没有一种简单的方法让用户从 SUBMIT 的下拉列表中转到 URL，而不是 onChange。

我有这个代码：

<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>

尝试将 onChange 更改为 onSubmit，但不起作用。

Answer 1

试试这个。

另外：您需要将 JavaScript 与 HTML 分开。不要使用onchange 或类似的 HTML 属性。虽然这在技术上没有错，但从代码质量/可维护性的角度来看却很糟糕。

var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");

goBtn.onclick = function() {
  window.location = menu.value;
}

<select id="menu">
  <option selected="selected">Select One</option>
  <option value="http://www.domain-one.com">London</option>
  <option value="http://www.domain-two.com">Glasgow</option>
</select>
<input type="button" id="goBtn" value="GO!">

这对你有用吗？

Answer 2

您可以在<form> 元素上使用onsubmit 事件，但您需要在该事件上防止Default，对于onsubmit 事件，您需要使用return：

<form name="cityselect" onsubmit="return redirectTo(this)">
  <select name="menu" value="GO">
    <option selected="selected">Select One</option>
    <option value="http://www.domain-one.com">London</option>
    <option value="http://www.domain-two.com">Glasgow</option>
  </select>
</form>

<script>
  function redirectTo(elem) {
    event.preventDefault();
    top.location.href = elem.firstElementChild.options[elem.firstElementChild.selectedIndex].value
  }
</script>