SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [セレクトフォーム２段ジャンプ]
Dynamic HTMLの参考書 Java Scriptの参考書

セレクトフォーム２段ジャンプ

機能

セレクトフォームを２つ用意して、１つ目のフォームを変更することで２つ目のフォームの内容を変更するスクリプトです。 当然、２つ目のフォームを変更すると指定したURLへジャンプすることが可能です。

多くのメニューを有するコンテンツにおいて、その威力を遺憾なく発揮することが可能でしょう。 数十のメニューをたった２つのフォームに凝縮することが可能で、メニューを非常にコンパクトにまとめることができます。

類似サンプル

  1. セレクトフォームジャンプ
  2. セレクトフォーム（フレーム版）
  3. ラジオ＆セレクトフォームジャンプ

利用方法

HEAD部分にスクリプトを記述します。 フォームをBODY部に記述します。

各メニューの設定はスクリプトトップ部分の配列変数で行います。 また、メニューの数を変更するには配列宣言の個数を適宜変更する必要があります。 その他は扱う必要はありません。

メニュー１
メニュー２を操作するメニューの設定
メニューの数 (MaxList1)
自由に設定して下さい。ただし、１以上の整数のみが有効です。最大数はブラウザ次第です。 サンプルでは５個の表示内容で、「5」としています。 また、メニュー２に関する情報の格納場所である配列を宣言する必要があります。 「urlList2[x] = new Array();」のように、増やした分の配列宣言をして下さい。 「x」は「0」から「MaxList1 - 1」までの個数が必要です。例えば、「MaxList1 = 10」であれば、 「0」から「9」となります。
メニューに表示するテキスト (urlList1[x])
urlList1[x]に文字列を指定します。「x」は「0」からメニューの数分だけ指定して下さい。 最大は「MaxList1 - 1」となります。 この変更に伴う配列宣言変更の必要はありません。
メニュー２
URLへジャンプするメニューの設定
メニューの数 (MaxList2[x])
自由に設定して下さい。ただし、１以上の整数のみが有効です。最大数はブラウザ次第です。 メニュー１で指定したメニューの数「MaxList1」分だけ指定して下さい。 サンプルでは、５個のメニュー２を作っており、それぞれ以下のように設定しています。
  • MaxList2[0] = 5
  • MaxList2[1] = 4
  • MaxList2[2] = 5
  • MaxList2[3] = 2
  • MaxList2[4] = 3
また最大数を変更した場合、それぞれのメニューに対して配列宣言を行う必要があります。（メニュー１に似ている） 例えばサンプルでは、「MaxList2[0] = 5」としているため、下記のような宣言を行っています。 これは全てのメニュー２に対して行わなければなりません。
  • urlList2[0][0] = new Array();
  • urlList2[0][1] = new Array();
  • urlList2[0][2] = new Array();
  • urlList2[0][3] = new Array();
  • urlList2[0][4] = new Array();
メニューに表示するテキスト (urlList2[x][y][COM])
urlList2[x]に文字列を指定します。「x」はメニュー１の何番目のメニューかを指します。（上記、メニューの数同様） 最大は「MaxList2[x] - 1」となります。 ここで指定したものは、メニュー１で「x」を選択したときにメニュー２に表示されます。 この変更に伴う配列宣言変更の必要はありません。
メニューからジャンプする先のURL (urlList2[x][y][URL])
urlList2[x]にURLを指定します。「x」はメニュー１の何番目のメニューかを指します。（上記、メニューの数同様、テキストに対応するURL） 最大は「MaxList2[x] - 1」となります。 ここで指定したものは、メニュー２と対応するテキストが選択されたときにジャンプします。 この変更に伴う配列宣言変更の必要はありません。
フォーム
２つのフォームを作ります。Name属性は変更不可です。 基本的に変更する必要はありませんが、OPTION要素に全角スペースを記述し、意味不明に指定していますが、 これはNN不具合対策です。JavaScriptでセレクトフォームを作るとサイズが正しく表示されず、 指定したテキストも表示されません。改めてリロードやリサイズなどを行えばこの問題は回避できるのですが、 その２度手間の処理を行うよりは、ダミーのOPTION要素で対応する方がスマートです。 メニューの数を増やし不具合が発生した場合は、このOPTION要素も増やして下さい。 全角スペースの数はメニューに表示するメニューのテキストの幅より大きくすればＯＫです。

対応ブラウザ

IE3,NN3以上

サンプル

［サンプルを見る］ ［ダウンロード］

[Go To Top]

ソース(スクリプト＆フォーム)

<!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-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>セレクトフォーム２段ジャンプ</title>

<script language="JavaScript">
<!--
var URL = 0;
var COM = 1;

//必要に応じて配列宣言を追加削除
var urlList1 = new Array();
var MaxList2 = new Array();
var urlList2 = new Array();
	urlList2[0] = new Array();
		urlList2[0][0] = new Array();
		urlList2[0][1] = new Array();
		urlList2[0][2] = new Array();
		urlList2[0][3] = new Array();
		urlList2[0][4] = new Array();
	urlList2[1] = new Array();
		urlList2[1][0] = new Array();
		urlList2[1][1] = new Array();
		urlList2[1][2] = new Array();
		urlList2[1][3] = new Array();
	urlList2[2] = new Array();
		urlList2[2][0] = new Array();
		urlList2[2][1] = new Array();
		urlList2[2][2] = new Array();
		urlList2[2][3] = new Array();
		urlList2[2][4] = new Array();
	urlList2[3] = new Array();
		urlList2[3][0] = new Array();
		urlList2[3][1] = new Array();
	urlList2[4] = new Array();
		urlList2[4][0] = new Array();
		urlList2[4][1] = new Array();
		urlList2[4][2] = new Array();
		urlList2[4][3] = new Array();

//メニュー設定ここから
var MaxList1 = 5;							//List1の項目数

urlList1[0] = "Lsit1";						//List1の１項目目の表示内容
MaxList2[0] = 5;							//List1の１項目目に対応するList2の項目数
urlList2[0][0][URL] = "sp49_0.html";		//List1の１項目目に対応するList2の１項目目のURL
urlList2[0][0][COM] = "LIST1 - 0";			//List1の１項目目に対応するList2の１項目目の表示内容
urlList2[0][1][URL] = "sp49_0.html";
urlList2[0][1][COM] = "LIST1 - 1";
urlList2[0][2][URL] = "sp49_0.html";
urlList2[0][2][COM] = "LIST1 - 2";
urlList2[0][3][URL] = "";
urlList2[0][3][COM] = "---------";
urlList2[0][4][URL] = "sp49_0.html";
urlList2[0][4][COM] = "LIST1 - 2";

urlList1[1] = "Lsit2";						//List1の２項目目の表示内容
MaxList2[1] = 4;							//List1の２項目目に対応するList2の項目数
urlList2[1][0][URL] = "sp49_0.html";
urlList2[1][0][COM] = "LIST2 - 0";
urlList2[1][1][URL] = "sp49_0.html";
urlList2[1][1][COM] = "LIST2 - 1";
urlList2[1][2][URL] = "sp49_0.html";
urlList2[1][2][COM] = "LIST2 - 2";
urlList2[1][3][URL] = "sp49_0.html";
urlList2[1][3][COM] = "LIST2 - 3";

urlList1[2] = "Lsit3";
MaxList2[2] = 5;
urlList2[2][0][URL] = "sp49_0.html";
urlList2[2][0][COM] = "LIST3 - 0";
urlList2[2][1][URL] = "";
urlList2[2][1][COM] = "=========";
urlList2[2][2][URL] = "sp49_0.html";
urlList2[2][2][COM] = "LIST3 - 2";
urlList2[2][3][URL] = "sp49_0.html";
urlList2[2][3][COM] = "LIST3 - 3";
urlList2[2][4][URL] = "sp49_0.html";
urlList2[2][4][COM] = "LIST3 - 4";

urlList1[3] = "Lsit4";
MaxList2[3] = 2;
urlList2[3][0][URL] = "sp49_0.html";
urlList2[3][0][COM] = "LIST4 - 0";
urlList2[3][1][URL] = "sp49_0.html";
urlList2[3][1][COM] = "LIST4 - 1";

urlList1[4] = "Lsit5";
MaxList2[4] = 3;
urlList2[4][0][URL] = "sp49_0.html";
urlList2[4][0][COM] = "LIST5 - 0";
urlList2[4][1][URL] = "sp49_0.html";
urlList2[4][1][COM] = "LIST5 - 1";
urlList2[4][2][URL] = "sp49_0.html";
urlList2[4][2][COM] = "LIST5 - 2";
//メニュー設定ここまで

//List1
function List1Out(){
	var i;
	document.Jump1.LTitle1.options.length = MaxList1;
	for(i = 0; i <= MaxList1 - 1; i++){
		document.Jump1.LTitle1.options[i].text = urlList1[i];
	}
	document.Jump1.LTitle1.options[0].selected = true;
	List2Out();
}

//List2
function List2Out(){
	var i,n;
	n = document.Jump1.LTitle1.selectedIndex;
	document.Jump2.LTitle2.options.length = MaxList2[n];
	for(i = 0; i <= MaxList2[n] - 1; i++){
		document.Jump2.LTitle2.options[i].text = urlList2[n][i][COM];
	}
	document.Jump2.LTitle2.selectedIndex = 0;
}

//Jump
function JumpAnchor(){
	var m,n;
	m = document.Jump1.LTitle1.selectedIndex;
	n = document.Jump2.LTitle2.selectedIndex;
	if(urlList2[m][n][URL] != ""){
		location = urlList2[m][n][URL];
	}
}

// -->
</script>

</head>

<body onload="List1Out()">

<form name="Jump1">
<span style="font-size:16pt;font-weight:bold;font-family:verdana,Osaka,sans-serif">LIST1</span>
<select name="LTitle1" size="1" onchange="List2Out()">
<!-- NN対策 begin -->
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<option>　　　　</option>
<!-- NN対策 end -->
</select>
</form>

<form name="Jump2">
<span style="font-size:16pt;font-weight:bold;font-family:verdana,Osaka,sans-serif">LIST2</span>
<select name="LTitle2" size="1" onchange="JumpAnchor()">
<!-- NN対策 begin -->
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<option>　　　　　　　</option>
<!-- NN対策 end -->
</select>
</form>

</body>
</html>

ソース(リンク先のダミー)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="ja">

<head>

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

<style type="text/css">
<!--
h1{
	font-size:			24pt;
	font-weight:		bold;
	color:				#900;
}
-->
</style>

</head>

<body>

<h1>Select Form LINK</h1>
<a href="sp49.html">戻る</a>

</body>
</html>
[Go To Top]
Last modified Nov,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.