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

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

ラジオ&セレクトフォームジャンプ

機能

ラジオボタンとセレクトフォームを用意して、選択されたラジオボタンごとにセレクトフォームの内容を変更するスクリプトです。 当然、2つ目のフォームを変更すると指定したURLへジャンプすることが可能です。

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

類似サンプル

  1. セレクトフォームジャンプ
  2. セレクトフォーム(フレーム版)
  3. セレクトフォーム2段ジャンプ

利用方法

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

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

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

対応ブラウザ

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の項目数

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

MaxList2[1] = 4;							//List1の2項目目に対応するList2の項目数
urlList2[1][0][URL] = "";
urlList2[1][0][COM] = "--- LIST2 ---";
urlList2[1][1][URL] = "sp56_0.html";
urlList2[1][1][COM] = "LIST2 - 1";
urlList2[1][2][URL] = "sp56_0.html";
urlList2[1][2][COM] = "LIST2 - 2";
urlList2[1][3][URL] = "sp56_0.html";
urlList2[1][3][COM] = "LIST2 - 3";

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

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

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

//List1
function List1Out(){
	var i;
	var n = -1;
	for(i = 0; i <= document.Jump1.elements.length - 1; i++){
		if(document.Jump1.elements[i].checked) n = i;
	}
	if(n != -1){
		List2Out();
	}
}

//List2
function List2Out(){
	var i;
	var n = -1;
	for(i = 0; i <= document.Jump1.elements.length - 1; i++){
		if(document.Jump1.elements[i].checked) n = i;
	}
	if(n != -1){
		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 i;
	var m = -1;
	var n;
	for(i = 0; i <= document.Jump1.elements.length - 1; i++){
		if(document.Jump1.elements[i].checked) m = i;
	}
	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><br>
<input type="radio" name="LTitle1" onclick="List2Out()" value="tp1">TYPE1<br>
<input type="radio" name="LTitle1" onclick="List2Out()" value="tp2" checked>TYPE2<br>
<input type="radio" name="LTitle1" onclick="List2Out()" value="tp3">TYPE3<br>
<input type="radio" name="LTitle1" onclick="List2Out()" value="tp4">TYPE4<br>
<input type="radio" name="LTitle1" onclick="List2Out()" value="tp5">TYPE5<br>
</form>

<form name="Jump2">
<span style="font-size:16pt;font-weight:bold;font-family:verdana,Osaka,sans-serif">LIST2</span><br>
<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>Radio and Select Form LINK</h1>
<a href="sp56.html">戻る</a>

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

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