WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)
DHCICVbvuKA[Y

■ JavaScript - サンプル集(257種類) - フォーム
   - ポップアップメニューの項目変更

2つのポップアップメニューがあります。
1つのポップアップメニューで項目を選択すると、もう1つのポップアップメニューの内容が変わります。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」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","サンプル集(リンク)","サンプル集(フォーム)");

	//2つ目が選択された時に2つ目のフォームに表示する内容
	names2=new Array("JavaScript","サンプル集(フォーム)","サンプル集(リンク)","JavaScript");

	//3つ目が選択された時に2つ目のフォームに表示する内容
	names3=new Array("サンプル集(リンク)","サンプル集(フォーム)");

	//内容を格納している配列を格納する配列
	names=new Array("",names1,names2,names3);

	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);
			}
		}

//-->
</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">
  <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つ目のポップアップメニュー変更する為のデータを用意します。

ここで必要となるのは、「変更後の項目名」です。
そのデータを設定してみましょう。

ソースの上から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>
これで変更は終わりです。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.