2つのポップアップメニューがあります。
1つのポップアップメニューで項目を選択すると、もう1つのポップアップメニューの内容が変わります。
さらに、変わったポップアップメニューの項目の値も変わります。
サンプルではわかりやすいように、2つ目のポップアップメニューを変更して、
その後に2つ目のポップアップメニューの項目を選択すると、テキストボックスにその内容が表示されるようになっています。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」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つ目のフォームに代入する値
value1=new Array("0","1","2");
//2つ目が選択された時に2つ目のフォームに表示する内容
names2=new Array("JavaScript","サンプル集（フォーム）","サンプル集（リンク）","JavaScript");
//2つ目が選択された時に2つ目のフォームで代入する値
value2=new Array("0","2","1","0");
//3つ目が選択された時に2つ目のフォームに表示する内容
names3=new Array("サンプル集（リンク）","サンプル集（フォーム）");
//3つ目が選択された時に2つ目のフォームで代入する値
value3=new Array("1","2");
//内容を格納している配列を格納する配列
names=new Array("",names1,names2,names3);
values=new Array("",value1,value2,value3);
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);
document.form2.sele1.options[i].value=values[dore][i];
}
}
}
}
function SlectJump()
{
document.form2.text1.value=document.form2.sele1.options[document.form2.sele1.selectedIndex].value;
}
//-->
</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" size="5" onChange="SlectJump();">
<option> </select>
</select><br>
<input type="text" name="text1" size="20">
</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つ目のポップアップメニュー変更する為のデータを用意します。
ここで必要となるのは、「変更後の項目名」です。
そのデータを設定してみましょう。
ソースの上から5〜7行目をご覧下さい。
その3行が変更用のデータになっています。
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
データ部分を抜き出してみましたが、
1行目が「1つ目」用のデータ、
2行目が「2つ目」用のデータ、
3行目が「3つ目」用のデータ、
となっています。
「HOME」「JavaScript」「Library(Link)」などの項目がありますが、
お好きなようにデータを変更してください。
項目を減らしたい場合は、後ろから減らしていきます。
増やす場合は必要な数だけ、追加してください。
例えば、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");
|
| 変更後 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)");
names3=new Array("Library(Link)","HOME","JavaScript");
|
削除する場合、追加する場合のどちらの場合でも、
項目の区切りとなっている「,」も変更する事を忘れないでください。
2つ目のポップアップメニュー用のデータの変更方法を説明しましたが、
では1つ目の項目自体を減らしたり増やした場合はどうするのか？
これも同じです。
項目用データを新たに作成します。
ただし、1つ注意点があります。
まず、減らした場合から説明します。
項目を減らしたい場合は、該当データを格納している行を削除します。
そして、重要なのはソースの上から8行目にある
names=new Array("",names1,names2,names3);
も変更しないといけません。
8行目を見てみますと、names1、names2、names3などが並んでいますね。
これは各データを格納している場所の名前です。
この部分も減らす必要があります。
説明だけではわかりにくいでしょうから、実際に項目を1つ減らした場合はどうなるのか、見てください。
| 変更前 |
|---|
names1=new Array("HOME","JavaScript","Library(Link)");
names2=new Array("JavaScript","HOME","Library(Link)","JavaScript");
names3=new Array("Library(Link)","HOME");
names=new Array("",names1,names2,names3);
……
<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");
names=new Array("",names1,names2);
……
<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");
names=new Array("",names1,names2,names3);
……
<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");
names=new Array("",names1,names2,names3,names4);
……
<form name="form1">
<select name="sele1" onChange="SelectChange();">
<option>
<option>1つ目
<option>2つ目
<option>3つ目
<option>4つ目
</select>
</form>
|
これで変更は終わりです。
|
