2つのポップアップメニューがあります。
1つのポップアップメニューで項目を選択すると、もう1つのポップアップメニューの内容が変わります。
そして2つ目のポップアップメニューを選択すると、指定されたURLへとジャンプします。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
//1つ目が選択された時に2つ目のフォームに表示する内容
names1=new Array("JavaScript","サンプル集（リンク）","サンプル集（フォーム）");
//1つ目が選択された時に2つ目のフォームで機能するURL
urls1=new Array("../../index.html","../../lib_link.html","../../lib_form.html");
//2つ目が選択された時に2つ目のフォームに表示する内容
names2=new Array("JavaScript","サンプル集（フォーム）","サンプル集（リンク）","JavaScript");
//2つ目が選択された時に2つ目のフォームで機能するURL
urls2=new Array("../../index.html","../../lib_form.html","../../lib_link.html","../../index.html");
//3つ目が選択された時に2つ目のフォームに表示する内容
names3=new Array("サンプル集（リンク）","サンプル集（フォーム）");
//3つ目が選択された時に2つ目のフォームで機能するURL
urls3=new Array("../../lib_link.html","../../lib_form.html");
//内容を格納している配列を格納する配列
names=new Array("",names1,names2,names3);
urls=new Array("",urls1,urls2,urls3);
len=0;
for(i=0; i<names.length; i++)if(names[i].length > len)len=names[i].length;
dore=0;
function SelectChange()
{
dore=document.form1.sele1.selectedIndex;
if(dore != 0)
{
atai=0;
for(i=0; i<len; i++)
{
if(names[dore].length < len && names[dore].length <= i)
{
document.form2.sele1.options[i-atai]=null;
atai++;
}
else
document.form2.sele1.options[i]=new Option(names[dore][i],i);
}
}
}
function SlectJump()
{my_url=document.form2.sele1.selectedIndex;
location.href=urls[dore][my_url];}
//-->
</script>
</head>
<body>
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
</select>
</form>
<form name="form2">
<select name="sele1" onChange="SlectJump();" size="5">
<option> </select>
</form>
</body></html>
[ 解説 ]
まず、1つ目のポップアップメニューの内容を変更します。
ソースの下から13〜10行目をご覧下さい。
<option>
<option>1つ目
<option>2つ目
<option>3つ目
の部分が、1つ目のポップアップメニューの項目です。
ここはお好きなように項目名を変更してください。
もし1つ目のポップアップメニューを減らしたいならば、
下から1行ずつ減らします。
例えば、1つ項目を減らす場合は、以下のようになります。
| 変更前 |
|---|
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
</select>
</form>
|
| 変更後 |
|---|
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
</select>
</form>
|
また、項目を増やす場合は、減らす場合と反対に増やしてあげます。
サンプルに項目を1つ追加すると、以下のようになります。
| 変更前 |
|---|
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
</select>
</form>
|
| 変更後 |
|---|
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
<option>4つ目
</select>
</form>
|
では次に、1つ目のポップアップメニューが選択された際に、
2つ目のポップアップメニュー変更する為のデータを用意します。
ここで必要となるのは、「変更後の項目名」と「ジャンプ先のURL」です。
そのデータを設定してみましょう。
ソースの上から5〜7行目と、9〜11行目をご覧下さい。
その上の3行が変更後の項目名、下の3行がジャンプ先のURLになっています。
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
urls3=new Array("../lib_link.html","../../index.html");
データ部分を抜き出してみましたが、
names1とurls1の行が「1つ目」用のデータ、
names2とurls2の行が「2つ目」用のデータ、
names3とurls3の行が「3つ目」用のデータ、
となっています。
「HOME」「JavaScript」「Library(Link)」などの項目がありますが、
お好きなようにデータを変更してください。
また、URLもお好きなようにご変更下さい。
項目を減らしたい場合は、後ろから減らしていきます。
増やす場合は必要な数だけ、追加してください。
例えば、2つ目用のデータから項目を1つ削除し、
3つ目用のデータに項目を1つ追加する場合は、以下のようになります。
| 変更前 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
urls3=new Array("../lib_link.html","../../index.html");
|
| 変更後 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)");
names3=new Array("Library(Link)","HOME","JavaScript");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html");
urls3=new Array("../lib_link.html","../../index.html","../../index.html#JavaScript");
|
削除する場合、追加する場合のどちらの場合でも、
項目の区切りとなっている「,」も変更する事を忘れないでください。
2つ目のポップアップメニュー用のデータの変更方法を説明しましたが、
では1つ目の項目自体を減らしたり増やした場合はどうするのか？
これも同じです。
項目用データを新たに作成します。
ただし、1つ注意点があります。
まず、減らした場合から説明します。
項目を減らしたい場合は、該当データを格納している行を削除します。
そして、重要なのはソースの上から13、14行目にある
names=new Array("",names1,names2,names3);
urls=new Array("",urls1,urls2,urls3);
も変更しないといけません。
上の行にはnames1、names2、names3
下の行にはurls1、urls2、urls3
などが並んでいますね。
これは各データを格納している場所の名前です。
この部分も減らす必要があります。
説明だけではわかりにくいでしょうから、実際に項目を1つ減らした場合はどうなるのか、見てください。
| 変更前 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
urls3=new Array("../lib_link.html","../../index.html");
names=new Array("",names1,names2,names3);
urls=new Array("",urls1,urls2,urls3);
……
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
</select>
</form>
|
| 変更後 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
names=new Array("",names1,names2);
urls=new Array("",urls1,urls2);
……
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
</select>
</form>
|
反対に項目を増やした場合。
これも今までと要領は同じですね。
必要なデータを新たに設置します。
ただし、この時もう一つ注意点があります。
新たに設置するデータの格納場所の名前、これに注意してください。
サンプルの場合ですと、格納場所の名前はそれぞれnames1、names2、names3となっています。
4つ目を増やす場合は、names1、names2、names3とは別の名前を付けなければなりません。
同じ名前を付けてはいけません。
これも変更した場合どうなるのか、確認した方が早いでしょう。
以下をご覧下さい。
| 変更前 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
urls3=new Array("../lib_link.html","../../index.html");
names=new Array("",names1,names2,names3);
urls=new Array("",urls1,urls2,urls3);
……
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
</select>
</form>
|
| 変更後 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
names4=new Array("HOME","Library(Link)","HOME");
urls1=new Array("../../index.html","../../index.html#JavaScript","../lib_link.html");
urls2=new Array("../../index.html#JavaScript","../../index.html","../lib_link.html","../../index.html#JavaScript");
urls3=new Array("../lib_link.html","../../index.html");
urls4=new Array("../../index.html","../lib_link.html","../../index.html");
names=new Array("",names1,names2,names3,names4);
urls=new Array("",urls1,urls2,urls3,urls4);
……
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
<option>4つ目
</select>
</form>
|
これで変更は終わりです。
|
