Formのselect optionで入力項目を変更するjavascriptです。
別にselect optionでなくてもいくらでも応用できますし、innerHTMLで内容の入れ替えを行っているだけなので入力フォームじゃなくても別にいけます。
一部ソースにスマートじゃない部分ありますが、まあご愛嬌。
参加人数によって氏名、アドレス記入欄を変更します。
サンプルページの場合は、select optionのvalueがonChangeする際にfunction.ninzuChangeが動き、フォーム内容が切り替わるというようになっています。
function.ninzuChange内は、単純にvalueがninzu1ならこうする、ninzu2ならこうする。。。と記述してあります。
以下詳細（サンプルページのソースです）
function ninzuChange(sel){
var value = sel.options[sel.selectedIndex].value;
if(value == "ninzu1"){
document.getElementById("ninzuname").innerHTML = 'お名前１<INPUT TYPE="text" NAME="no1-name" id="text6" SIZE="30">';
document.getElementById("mailadds").innerHTML = 'メールアドレス１<INPUT TYPE="text" NAME="no1-address" id="text6" SIZE="60">';
}
else if(value == "ninzu2"){
document.getElementById("ninzuname").innerHTML = 'お名前１<INPUT TYPE="text" NAME="no1-name" id="text6" SIZE="30"><br />お名前２<INPUT TYPE="text" NAME="no2-name" id="text6" SIZE="30">';
document.getElementById("mailadds").innerHTML = 'メールアドレス１<INPUT TYPE="text" NAME="no1-address" id="text6" SIZE="60"><br />メールアドレス２<INPUT TYPE="text" NAME="no2-address" id="text6" SIZE="60">';
}
else if(value == "ninzu0"){
document.getElementById("ninzuname").innerHTML = '';
document.getElementById("mailadds").innerHTML = '';
}
}
ここがポイントかなと↓
var value = sel.options[sel.selectedIndex].value;
selectedIndex知らずに（手元のリファレンスにはばっちり書いてあるのに気づかないという）かなりつまずいた。。。
selectedIndex・・・セレクトメニューの選択されている項目のインデックス値を参照する
※インデックス値とは配列の要素など複数の値が存在するものの順番を表す値。インデックス値の最初の値は「0」であることに注意
options・・・options は<option>に対応するオプションオブジェクトの配列、options[n] は個々のオブジェクト
body内のoptionフォームの記載は以下の通りです。
<select name="allNizu" onChange="ninzuChange(this)">
<option value="ninzu0" selected>お選びください</option>
<option value="ninzu1">1名</option>
<option value="ninzu2">2名</option>
</select>
DOMで反映させるのは
<div id="ninzuname"></div>の部分。
----------------2009/08/26-------------
すいません。
もっと単純なソースでできました。
ポイントとしてあげた
var value = sel.options[sel.selectedIndex].value;
がまるでいりません。
今更ながらあれ、これ必要？とふと疑問になり、もっとシンプルな方法が思い浮かんだので、試したら動きました。
<select name="allNizu" onChange="ninzuChange(this)">
を
<select name="allNizu" onChange="ninzuChange(value)">
とし、
function ninzuChange(value){
if(value == "ninzu1"){
document.getElementById("ninzuname").innerHTML = 'お名前１<INPUT TYPE="text" NAME="no1-name" id="text6" SIZE="30">';
document.getElementById("mailadds").innerHTML = 'メールアドレス１<INPUT TYPE="text" NAME="no1-address" id="text6" SIZE="60">';
}
else if(value == "ninzu2"){
document.getElementById("ninzuname").innerHTML = 'お名前１<INPUT TYPE="text" NAME="no1-name" id="text6" SIZE="30"><br />お名前２<INPUT TYPE="text" NAME="no2-name" id="text6" SIZE="30">';
document.getElementById("mailadds").innerHTML = 'メールアドレス１<INPUT TYPE="text" NAME="no1-address" id="text6" SIZE="60"><br />メールアドレス２<INPUT TYPE="text" NAME="no2-address" id="text6" SIZE="60">';
}
else if(value == "ninzu0"){
document.getElementById("ninzuname").innerHTML = '';
document.getElementById("mailadds").innerHTML = '';
}
}
でOKです。
