JavaScriptのサンプル

フォームのセレクトボックスでリンクするスクリプトです。(選択のみでジャンプするタイプ)

フレームにも対応しています。

フレームを使ったサンプル新規ウィンドウで表示

コード

<html>
<head>
<title>TAG index Webサイト</title>

<script type="text/javascript">
<!--

// 設定開始
// (フレームの場合は、表示先のフレーム名を設定してください)
// (top を指定すると、フレームの分割を廃止して画面全体で表示します)
// (blank を指定すると、新規ウィンドウで表示します)

var target = "";

// 設定終了


function jump(){

	var url = document.form1.select.options[document.form1.select.selectedIndex].value;

	if(url != "" ){

		if(target == 'top'){

			top.location.href = url;

		}
		else if(target == 'blank'){

			window.open(url, 'window_name');

		}
		else if(target != ""){

			eval('parent.' + target + '.location.href = url');

		}
		else{

			location.href = url;

		}

	}

}

// -->
</script>

</head>
<body>

<form action="#" name="form1">
<select name="select" onChange="jump()">
<option value="">選択してください</option>
<option value="../../index.html">トップページ</option>
<option value="../../html_tag/index.html">HTMLタグ</option>
<option value="../../stylesheet/index.html">スタイルシート</option>
<option value="../../javascript/index.html">JavaScript</option>
<option value="../../color/index.html">カラーチャート</option>
</select>
</form>

</body>
</html>

解説

<head></head> 内にスクリプトを記述しておき、セレクトボックスの選択でスクリプトを実行します。

optionタグで指定したURLにジャンプします。URLの部分が空の場合は、何も変化しません(ジャンプしません)。

フレームを使用している場合

フレームを使用している場合で、リンク先のページを別フレームに表示したい場合には、// 設定開始// 設定終了 の部分で表示先のフレーム名を設定します。

var target = "main";

main と書かれた部分にフレーム名を記述してください。

フレームの分割を廃止して画面全体で表示したい場合には、この部分に top を指定します。

var target = "top";

同じフレーム内に表示する場合は、これらの設定は必要ありません。

新規ウィンドウで表示する場合

リンク先のページを新規ウィンドウで表示したい場合は、設定部分で blank を指定します。

var target = "blank";
  • スクリプト内の window_name の部分は、新規ウィンドウに付けられるウィンドウ名です。

青い文字の部分は、必要に応じて書き換えてください。