JavaScriptコーディング

プルダウン選択で表示のオン/オフ

2011年05月31日
以前JavaScriptで、プルダウンで選択した値によって表示をオンにしたりオフにしたりするコードを書いていましたが、OperaとFirefoxで動かないことが分かりました。
そこで、ネットで色々調べて、あれこれ試してみました。

コールするhtml側
<form method="post" action="" name="frmForm">
 <select name="selection" onchange="funHyoji(frmForm)">
  <option value="val1">値1</option>
  <option value="val2">値2</option>
 </select>
 <span id="hyoji" name="hyoji">
  表示したり表示を消したり
 </span>
</form>

JavaScriptの関数
function funHyoji(frmObj){
 if(frmObj.elements["selection"].value == "val1")){
  document.getElementById("hyoji").style.visibility="visible";
 }
 else{
  document.getElementById("hyoji").style.visibility="hidden";
 }
}

これで、値1を選んだときは文字が表示され、値1以外(この場合は値2)のときは表示が消えます。

以前は、JavaScriptを
function dspSort(frmObj) {
 if(frmObj.elements["selection"].value == "val1"){
  frmObj.document.getElementById("hyoji").style.display="";
 }
 else{
  frmObj.document.getElementById("hyoji").style.display="none";
 }
}
と書いていました。
IEではちゃんと動くのですが、OperaとFirefoxでは動きませんでした。