下拉選擇表單，轉到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事件，但你要的preventDefault該事件，併爲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>