プルダウンで選択した値によって、表示する行数を変えたい

現在、HPで予約ページを作成しているんですが、プルダウンで選んだ値（1～10）によって、入力できる行数を変えたいと思い、思考錯誤中です。。

イメージとしては、”じゃらん”で宿泊予約する際の予約内容入力画面です。
プルダウンで1～10部屋目まで選択⇒選んだ部屋数分の行（部屋数ごとの人数入力行）が表示される。

どなたかご存知な方がいらっしゃいましたらご教授頂けると幸いです。
宜しくお願い致します。

No.1 回答者： yambejp 回答日時： 2009/04/09 17:19

大きく二つ

一つはDOMで都度行を作成する。こちらの方がきれいにかけて
汎用性も高いのだけど、知識が必要なので今回はパス

もう一つは最初かくしておいて、セレクトを選ぶたびにで表示する。
余分なデータをおくらないように多少工夫が必要です。
こんな感じで・・・

<script>
window.onload=function(){display_row(document.getElementById("s0").value);}
function display_row(num){
var tags=document.getElementById("t0").getElementsByTagName("tbody")[0].getElementsByTagName("tr");
for(var i=0;i<tags.length;i++){
var inps=tags[i].getElementsByTagName("input");
var flg=(i>=parseInt(num));
tags[i].className=flg?"hide":"";
for(var j=0;j<inps.length;j++){
inps[j].disabled=flg;
}
}
}
</script>
<style>
.hide{display:none;}
</style>
<form>
<p>
<select id="s0" onchange="display_row(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</p>
<table border id="t0">
<thead>
<tr><td>num</td><td>data</td></tr>
</thead>
<tbody>
<tr><td>1</td><td><input type="text" name="hoge[1]" /></td></tr>
<tr class="hide"><td>2</td><td><input type="text" name="hoge[2]" /></td></tr>
<tr class="hide"><td>3</td><td><input type="text" name="hoge[3]" /></td></tr>
<tr class="hide"><td>4</td><td><input type="text" name="hoge[4]" /></td></tr>
<tr class="hide"><td>5</td><td><input type="text" name="hoge[5]" /></td></tr>
<tr class="hide"><td>6</td><td><input type="text" name="hoge[6]" /></td></tr>
<tr class="hide"><td>7</td><td><input type="text" name="hoge[7]" /></td></tr>
<tr class="hide"><td>8</td><td><input type="text" name="hoge[8]" /></td></tr>
<tr class="hide"><td>9</td><td><input type="text" name="hoge[9]" /></td></tr>
<tr class="hide"><td>10</td><td><input type="text" name="hoge[10]" /></td></tr>
</tbody>
</table>
<p>
<input type="submit" value="send" />
</p>
</form>

この回答へのお礼

さっそくの回答ありがとうございます。

作成中のページに入れ込んでみたところ、なんとか動作しました！
これを元に、いろいろ付け加えていこうと思います。

お礼日時：2009/04/09 18:46