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 · ベストアンサー

こんばんは。

やり方はいろいろかと思いますが、とりあえず・・・。
まず、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様
お礼が遅くなりました！
ありがとうございました！