セレクトメニューの選択項目を変更したい。

<head>
<script type="text/JavaScript">
<!--
//option の 各設定項目
// CPU名設定
	CPU = new Array();
	CPU[1] = "Celeron D 345J";
	CPU[2] = "Pentium4 530";
	CPU[3] = "Pentium4 540";
	CPU[4] = "Pentium4 550";
	CPU[5] = "Pentium4 560";
	CPU[6] = "Pentium4 570J";
	CPU[7] = "Athlon64 3200+";
	CPU[8] = "Athlon64 3500+";
	CPU[9] = "Athlon64 3800+";
	CPU[10] = "Athlon64 4000+";
	cpuIntel = 6;
	cpuAmd = 10;

// メモリー名設定
	Memory = new Array();
	Memory[1] = "PC4300 256MB DDR2";
	Memory[2] = "PC4300 512MB DDR2(256*2)";
	Memory[3] = "PC4300 1GB DDR2(512*2)";
	Memory[4] = "PC3200 256MB DDR";
	Memory[5] = "PC3200 512MB DDR(256*2)";
	Memory[6] = "PC3200 1GB DDR(512*2)";	
	memIntel = 3;
	memAmd = 6;

// マザーボード名設定
	Mother = new Array();
	Mother[1] = "ASUS P5GD2 Premium";
	Mother[2] = "GIGABYTE GA-8I915 Duo";
	Mother[3] = "AOpen i915a-EFRII";
	Mother[4] = "ABIT AA8-3rd Eye";
	Mother[5] = "ASUS A8V Deluxe";
	Mother[6] = "GIGABYTE GA-K8NXP-SLI";
	Mother[7] = "ABIT AX8-3rd Eye";
	mbIntel = 4;
	mbAmd = 7;

// value値設定
	cpuvalue = "cpu";
	memvalue = "mem";
	mbvalue = "mb";

//セル削除関数
// DeleteCell(f,e,l)
// 引数fはformsの参照番号
// 引数eはelementsの参照番号
// 引数lは削除するセル数（0を入れると全セル削除）
// セルを削除する

function DeleteCell(f,e,l)
	{
		FormOBJ = document.forms[f].elements[e];
		if (l == 0) l = FormOBJ.length;
		for (i = l; i != 0; i--) //設定とは逆に削除
		{
			FormOBJ.options[i] = null;
		}
	}

//セル設定関数
// SetCell(f,e,l,s,a,v)
// 引数fはformsの参照番号
// 引数eはelementsの参照番号
// 引数lは設定するセルグループ数
// 引数sは前セルグループ数
// 引数aは配列名 (array)
// 引数vはvalue値 (value)
// セルを設定する

function SetCell(f,e,l,s,a,v)
	{
		FormOBJ = document.forms[f].elements[e];
		if (FormOBJ.length != 1) DeleteCell(f,e,0);
		for (i = 1; i <= (l - s); i++)
		{
			FormOBJ.options[i] = new Option(a[s + i],v + (s + i));
		}
	}

function OptionChange(cpul,cpus,meml,mems,mbl,mbs)
	{
		SetCell(0,2,cpul,cpus,CPU,cpuvalue);
		SetCell(0,3,meml,mems,Memory,memvalue);
		SetCell(0,4,mbl,mbs,Mother,mbvalue);
	}
//-->
</script>
</head>

<body onLoad="if(document.forms[0].elements[0].checked)
		{OptionChange(cpuIntel,0,memIntel,0,mbIntel,0)}
		else{OptionChange(cpuAmd,cpuIntel,memAmd,memIntel,mbAmd,mbIntel)}">
 <form action="" method="post">
 <p>プラットホーム
 <input type="radio" name="platform" value="intel" checked="checked"
 	onClick="OptionChange(cpuIntel,0,memIntel,0,mbIntel,0);">intel
 <input type="radio" name="platform" value="amd"
 	onClick="OptionChange(cpuAmd,cpuIntel,memAmd,memIntel,mbAmd,mbIntel);">AMD<br>
 ＣＰＵ:　　　　　　<select name="cpu">
 <option selected="selected" value="cpu0">選択して下さい</option>
 </select><br>
 メモリ:　　　　　 <select name="memory">
 <option selected="selected" value="mem0">選択して下さい</option>
 </select><br>
 マザーボード:　<select name="mother">
 <option selected="selected" value="mb0">選択して下さい</option>
 </select>
 </form>
</body>

　この例は、自作パソコンを作るとかシステムを組む時、プラットホームにより選択肢を変更するスクリプトです。プラットホームをラジオボタンで選ぶとＣＰＵ、メモリ、マザーボードの選択肢が変更されます。
　スクリプトの解説をしますと、選択肢の項目及びvalue値は配列を使い設定します。選択肢を変更する場合、選択項目数が違うことがあると、そのまま代入した場合器が足りなくなってしまいます。そうした事を考慮すると一度全選択項目を削除して（nullを代入すると削除出来ます）新たに選択項目を設定した方が賢明です。これが、このスクリプトの基本的な発想です。
セル設定削除の注意点としては、設定時は参照番号の若い順に設定、削除時は設定時の逆に削除することです。またこのスクリプトでは選択項目を動的に設定（ページロード時に設定）してますのでHTMLでは選択項目はデフォルトの”選択してください”のみ記述しておきます。さらにリロード時のことを考慮してラジオボタンのチェックを判定しチェックされている方をロードして選択項目を設定します。
手前味噌ですが、かなり実用的なスクリプトではないかと思っています。(^^ゞ
　元々は行き付けのショップに依頼されて作ったものです。このショップのページではもっと複雑になってますが参考にして下さい。

表示