ドロップダウンから指定 URL に移動
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function url_jump() {
	var num = document.form1.select1.selectedIndex;
	location.href = document.form1.select1.options[num].value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form1">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="url_jump();">
</form>
</body>
</html>
直接フォームに使用する場合
<form action="#">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="location.href = this.form.select1.options[select1.selectedIndex].value;">
</form>

ドロップダウンメニュー(プルダウン)にある option の value 値に移動先の URL とドロップダウンに表示される名前を記述してください。1番初めの「えらんでね」の所に "#"、もしくは現在表示している URL を指定しておかないと、「えらんでね」を選択したときにディレクトリが表示されます。(サーバにもよります)

document.フォーム名.エレメント名.selectedIndex とすると、フォームの option の位置の番号を取得することができますので、document.form1.select1.selectedIndex として、フォームの option の位置を取得します。1番初めの番号は 0 なので、この場合「えらんでね」が 0、「アニメーション GIF」が 1 のようになります。それを変数 num に代入します。

次に、document.フォーム名.エレメント名.options[n].value とすると、取得したい option の value 値を取得することができますので、document.form1.select1.options[num].value として、selectedIndex で取得した位置番号の変数 num を options[num] に代入してドロップダウンの option の値を location.href に代入して選択された URL を表示します。

ドロップダウンから指定 URL に移動
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function url_jump2() {
	location.href = document.form2.select1.value;
}
// -->
</script>
</head>
<body>
<form action="#" name="form2">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="url_jump2();">
</form>
</body>
</html>
直接フォームに使用する場合
<form action="#">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="location.href = select1.value;">
</form>

document.フォーム名.エレメント名.value とすると、その要素の内容を取得することができますので、それを location.href としてその URL を表示します。このように selectedIndex を使わなくても直接ドロップダウンの option の値を取得することができます。ただし、この方法は Netscape Communicator 4.x では取得することができませんのでご注意ください。

ドロップダウンから指定 URL に移動(別ウィンドウ)
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
function url_window() {
	var num = document.form3.select1.selectedIndex;
	var url = document.form3.select1.options[num].value;
	window.open(url, "new");
}
// -->
</script>
</head>
<body>
<form action="#" name="form3">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="url_window();">
</form>
</body>
</html>
直接フォームに使用する場合
<form action="#">
<select name="select1">
<option value="#">えらんでね
<option value="../../anime/index.html">アニメーション GIF
<option value="../../hamu/index.html">ハムちゃんの部屋
</select>
<input type="button" value="ジャンプ" onclick="window.open(this.form.select1.options[select1.selectedIndex].value, 'new');">
</form>

別ウィンドウで開くには location.href ではなくて window.open() を使用します。window.open() を使用しますので、ウィンドウのプロパティを追加することもできます。

[PR] Yahoo!ショッピング