option 選択による表示＆非表示

<select name="var">
<option value="1">見せる</option>
<option value="2">見せない</option>
</select>

<!--内容-->
<table>
<tr></td>内容</td></tr>
</table>


option　「見せる」を選択した場合、テーブル全体が<tabel>~</table>が表示、
option 「見せない」を選択した場合、テーブル全体が<tabel>~</table>が表示されなようにしたいです。


ご教授よろしくお願いいたします。

No.1 ベストアンサー 回答者： taka451213 回答日時： 2011/01/14 20:12

こんばんは。

やり方はいろいろかと思いますが、とりあえず・・・。
まず、selectタグに、
<select name="var" onchange="toggleDisp(this);">
とかって書いて、テーブルにIDを付けます。
<table id="targetTable">

んで、Javascriptを
function toggleDisp(obj){
if(obj.value == '1'){
// 見せる
document.getElementById('targetTable').style.display="block";
}else{
// 見せない
document.getElementById('targetTable').style.display="none";
}
}

とか・・・。
非表示にした時に、もともとの描画領域を残す場合は、
style.visibility="hidden"
で。

この回答へのお礼

taka451213様
お礼が遅くなりました！
ありがとうございました！

お礼日時：2011/02/05 01:09