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

セレクトフォームジャンプ（フレーム版）

機能

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

類似サンプル

利用方法

メインのページはフレームの宣言をします。セレクトフォームを作るページにスクリプトをを関数として記述します。フォームからその関数をコールし、関数から指定したURLへジャンプします。 URLの指定は、配列変数「url_list[A][B]」に対して行います。２次元配列で指定しており、[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();			//１ページ目
	url_list[2] = new Array();			//２ページ目

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

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>１ページ目</option>		<!--1番目-->
<option>２ページ目</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>０ページ目（上）</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>０ページ目（下）</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>１ページ目（上）</title>

</head>

<body bgcolor="#eeffee">

<p>１ページ目（上）</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>１ページ目（下）</title>

</head>

<body bgcolor="#ffeeee">

<p>１ページ目（下）</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>２ページ目（上）</title>

</head>

<body bgcolor="#eeffee">

<p>２ページ目（上）</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>２ページ目（下）</title>

</head>

<body bgcolor="#ffeeee">

<p>２ページ目（下）</p>

</body>
</html>

[Go To Top]