SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [セレクトフォームジャンプ(フレーム版)]

Dynamic HTMLの参考書 Java Scriptの参考書

セレクトフォームジャンプ(フレーム版)

機能

セレクトフォーム(ドロップダウンのリスト)の選択内容が変化したときに、 その選択項目に該当するURLへジャンプするスクリプトです。 リンク先が多く、限られたスペースに埋め込む場合に有効な方法です。 更にフレームに対応しました。

類似サンプル

  1. セレクトフォームジャンプ
  2. セレクトフォーム2段ジャンプ
  3. ラジオ&セレクトフォームジャンプ

利用方法

メインのページはフレームの宣言をします。 セレクトフォームを作るページにスクリプトをを関数として記述します。 フォームからその関数をコールし、関数から指定したURLへジャンプします。 URLの指定は、配列変数「url_list[A][B]」に対して行います。 2次元配列で指定しており、[A]はOPTIONに対応した順番、[B]はフレームに対応した順番です。 (詳細はソースを見て下さい)

フォームに記述するOPTION要素の上から順番に、関数に指定するURLが上から順に対応しています。 つまり、その両者の順番を揃えておかなければなりません。 また、スクリプトに記述するURLを表示するフレーム名も記述する必要があります。

対応ブラウザ

IE3,NN2以上

サンプル

サンプルを見る] [ダウンロード

フレーム元(sp42.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS">
<title>セレクトフォームジャンプ(フレーム版)</title>

</head>

<frameset cols="250,*">
	<frame src="sp42_0.html" name="left">
	<frameset rows="50%,*">
		<frame src="sp42_00.html" name="right0">
		<frame src="sp42_01.html" name="right1">
	</frameset>
</frameset>

<noframes>
フレームのスクリプトのため、これより先は意味がありません。
</noframes>

</html>
初期に表示する左フレーム[スクリプト](sp42_0.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<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 language="JavaScript">
<!--
function mk_array(){
	var leng = mk_array.arguments.length;
	for(i = 0; i < leng; i++){
		this[i] = mk_array.arguments[i];
	}
}

var PU = 0;
var PL = 1;

var url_list = new Array();
	url_list[0] = new Array();			//初期
	url_list[1] = new Array();			//1ページ目
	url_list[2] = new Array();			//2ページ目

url_list[0][PU] = "sp42_00.html";		//初期右上
url_list[0][PL] = "sp42_01.html";		//初期右下
url_list[1][PU] = "sp42_10.html";		//1ページ目右上
url_list[1][PL] = "sp42_11.html";		//1ページ目右下
url_list[2][PU] = "sp42_20.html";		//2ページ目右上
url_list[2][PL] = "sp42_21.html";		//2ページ目右下

function Jump_anchor(){
	var url_slct = document.Jump.list_title.selectedIndex;
	if(url_list[url_slct][PU] != ""){
		window.open(url_list[url_slct][PU],'right0');		//'right-u'は右上フレーム名
		window.open(url_list[url_slct][PL],'right1');		//'right-l'は右下フレーム名
	}
}
// -->
</script>

</head>

<body bgcolor="#eeeeff">

<form name="Jump">
<select name="list_title" size="1" onchange="Jump_anchor()">
<option selected>最初に戻る</option>
<option>1ページ目</option>		<!--1番目-->
<option>2ページ目</option>		<!--2番目-->
</select>
</form>

</body>
</html>
初期に表示する右上フレーム(sp42_00.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>0ページ目(上)</title>

</head>

<body bgcolor="#eeffee">

<p>左フレームから選択</p>

</body>
</html>
初期に表示する右下フレーム(sp42_01.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>0ページ目(下)</title>

</head>

<body bgcolor="#ffeeee">

<p>左フレームから選択</p>

</body>
</html>
リンク後に表示する右上フレーム(sp42_10.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>1ページ目(上)</title>

</head>

<body bgcolor="#eeffee">

<p>1ページ目(上)</p>

</body>
</html>
リンク後に表示する右下フレーム(sp42_11.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>1ページ目(下)</title>

</head>

<body bgcolor="#ffeeee">

<p>1ページ目(下)</p>

</body>
</html>
リンク後に表示する右上フレーム(sp42_20.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>2ページ目(上)</title>

</head>

<body bgcolor="#eeffee">

<p>2ページ目(上)</p>

</body>
</html>
リンク後に表示する右下フレーム(sp42_21.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="ja">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>2ページ目(下)</title>

</head>

<body bgcolor="#ffeeee">

<p>2ページ目(下)</p>

</body>
</html>
[Go To Top]

Last modified Nov,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.