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

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

機能

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

類似サンプル

利用方法

BODY部分にはフォームを、HEAD部分にはスクリプトを関数として記述します。フォームからその関数をコールし、関数から指定したURLへジャンプします。

フォームに記述するOPTION要素の上から順番に、関数に指定するURLが上から順に対応しています。つまり、その両者の順番を揃えておかなければなりません。

対応ブラウザ

IE3,NN3以上

サンプル

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<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" TYPE="text/javascript">
<!--
function mk_array(){
	var leng = mk_array.arguments.length;
	for(i = 0; i < leng; i++){
		this[i] = mk_array.arguments[i];
	}
}

function Jump_anchor(){
	var url_slct;
	var url_list = new mk_array('',
	'../dist/js01.html',	//1番目
	'../dist/js02.html',	//2番目
	'../dist/js03.html'	//3番目
	);
	url_slct = document.Jump.list_title.selectedIndex;
	if(url_list[url_slct] != ''){
		location = url_list[url_slct];
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="Jump">
<SELECT NAME="list_title" SIZE=1 onchange="Jump_anchor()">
<OPTION SELECTED>選択して下さい</OPTION>
<OPTION>最終更新日を自動的に挿入：１</OPTION>		<!--1番目-->
<OPTION>最終更新日を自動的に挿入：２</OPTION>		<!--2番目-->
<OPTION>現在の時刻表示</OPTION>				<!--3番目-->
</SELECT>
</FORM>

</BODY>
</HTML>

[Go To Top]