セレクトメニューで選択された項目を取得する(選択時に指定ページに飛ぶ)

説明

セレクトメニューで項目が選択されるとonChangeイベントが発生します。選択された項目の内容を読み出すにはセレクトメニューのvalueプロパティを読み出します。サンプルではthis.valueとしてセレクトメニューで選択された項目の内容を読み出しています。読み出した内容をlocation.hrefに設定すると指定されたページを表示することができます。
JavaScriptテクニック ブック  詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>セレクトメニューで選択された項目を取得する(選択時に指定ページに飛ぶ)</h1>
<form action="./jump.cgi" method="get" id="mainForm" name="mainForm">
<select id="jump">
<option value="http://www.yahoo.co.jp/">Yahoo</option>
<option value="http://www.google.co.jp/">Google</option>
<option value="http://www.openscp2.org/">OpenSpace</option>
</select>
</form>
</body>
</html>

window.onload = function(){
document.getElementById("jump").onchange = function(){
location.href = this.value;
}
}