ドロップダウン選択フォーム、URLに移動

Question

ユーザーがonChangeではなくSUBMITのドロップダウンリストから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> 

はをonSubmitへのonChangeを変更しようとしましたが、それは動作しません。

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をしたいと思う、とあなたはreturnを使用する必要がonsubmitイベントのために：

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