下拉 Select 表单，转到 URL 提交

Question

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

我有这个代码：

<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

您可以在 <form> 元素上使用 onsubmit 事件，但您需要在事件上阻止默认设置，对于 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>

Answer 2

试试这个。

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

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!">

这对你有用吗？

下拉 Select 表单，转到 URL 提交

Dropdown Select Form, Go to URL On SUBMIT

html

javascript

forms

jquery

form-submit