セレクトボックスでそれ以降の表示を切り替えたい

http://5am.jp/javascript/form_change_javascript/ の「サンプルソース（セレクトボックス）」のような入力フォームを作成中です。セレクトボックスでの選択によって、その下に複数行表示させたいので、サンプルソースのgetElementByIdのところをgetElementsByClassNameにして実装してみたのですが動きませんでした…。

以下が自分が書いたコードになります。どこがおかしいのでしょうか？
（インデントがうまくできていなくて申し訳ないです。）
回答よろしくお願いします。

<script type="text/javascript">
function entryChange2() {
if (document.getElementById('changeSelect')) {
id = document.getElementById('changeSelect').value;
if (id == 'select1') {
document.getElementsByClassName('firstBox2').style.display = "";
document.getElementsByClassName('secondBox2').style.display = "none";
} else if (id == 'select2') {
document.getElementsByClassName('firstBox2').style.display = "none";
document.getElementsByClassName('secondBox2').style.display = "";
}
}
}
window.onload = requestChange;
</script>

<form>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>利用方法</th>
<td>
<select id="changeSelect" name="hoge" onchange="entryChange2();">
<option value="select1">初めて申し込む</option>
<option value="select2">2度目以降の利用</option>
</select>
</td>
</tr>

<!-- 表示非表示切り替え -->
<tr class="firstBox2">
<th>紹介者</th>
<td><input type="text" />
<p>紹介された方のお名前を入力してください。</p></td>
</tr>
<tr class="firstBox2">
<th>紹介者のメールアドレス</th>
<td><input type="text" />
<p>紹介された方のメールアドレスを入力してください。</p></td>
</tr>
<!-- 表示非表示切り替え -->
<tr class="secondBox2">
<th>名前</th>
<td><input type="text" />
<p>名前を入力してください。</p></td>
</tr>
<tr class="secondBox2">
<th>会員番号</th>
<td><input type="text" />
<p>会員番号を入力してください。</p></td>
</tr>
</table>
</form>

No.1 ベストアンサー 回答者： warpspace 回答日時： 2013/11/09 09:59

document.getElementsByClassName( class )は、引数「class」に指定した

クラス名を持つ全ての要素への参照を格納した配列を返すメソッドです。
したがって、個々の配列の内容のstyle要素を変更するロジックが、必要です。

ちなみに、jqueryを使用すると簡単にできますので、jqueryを勉強されたら良いと
思います。

参考URL：http://alphasis.info/2013/07/javascript-dom-docu …

この回答へのお礼

なるほど！解決しました！！
JQueryも勉強してみます。
大変助かりました！

お礼日時：2013/11/09 10:31