Javascriptを使用したドロップダウンの選択に基づく表の表示

Good Morning、ドロップダウン選択に基づいてどの要素が表示され、非表示にされていますか。私は数多くのことを試しましたが、うまく動作するようには見えません。以下は、私が使用していますHTMLコードのサンプルです：Javascriptを使用したドロップダウンの選択に基づく表の表示

UPDATE: This is the new code that I tried out, but still nothing is working 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 



<script type="text/javascript"> 
$(document).ready(function() { 
    $('#TypeOfChange').change(function() { 
     if ($(this).val() == 'Option 1') { 
      $('#Table1').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table1').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 

     if ($(this).val() == 'Option 2') { 
     $('#Table2').css({'display': 'block'}); 
     $('#RequestTypeTableTR').css({'display': 'block'}); 
    } else { 
     $('#Table2').css({'display': 'none'}); 
     $('#RequestTypeTableTR').css({'display': 'none'}); 
    } 
}); 
}); 
</script> 


</head><body> 

       <form id="form1" name="form1" method="POST" action="<%=MM_editAction%>"> 
       <table border="0" class="form"> 

        <tr valign="baseline" class="clear"> 
        <td align="right" valign="middle" nowrap="nowrap" class="style8"><h2>General Information</h2></td> 
        <td valign="baseline">&nbsp;</td> 
        </tr> 


        <tr valign="baseline" class="clear"> 

        <td align="right" valign="top" nowrap="nowrap" class="style9"> 
         <p>*Request Type:</p> 
         </td> 
        <td valign="top" class="style8"> 
         <p> 
         <span id="spryselect5"> 
          <label> 
          <select name="TypeOfChange" id="TypeOfChange"> 
           <option value="Please Select" selected="selected">Please Select</option> 
           <option value="Option 1">Option 1</option> 
           <option value="Option 2">Option 2</option> 
           <option value="Option 3">Option 3</option> 
           <option value="Option 4">Option 4</option> 
           <option value="Option 5">Option 5</option> 
           </select> 
          </label> 

          <span class="selectInvalidMsg">Please select a valid item.</span><span class="selectRequiredMsg">Please select an item.</span> 
          </span> 
         <span class="style1">*</span> 
         </p> 
         </td> 
        </tr> 
        <tr style="display:none" id="RequestTypeTableTR" valign="baseline" class="clear"> 
        <td valign="middle" nowrap="nowrap">&nbsp;</td> 
        <td valign="baseline"> 


         <table style="display:none" id="Table1" width="100%"> 
         <tr> 
          <td Colspan="2" align="right" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety1</h2></td> 
          </tr> 

         </table> 


         <table style="display:none" id="Table2" width="100%"> 
         <tr> 
          <td Colspan="2" align="left" valign="middle" nowrap="nowrap" class="style8"><h2>Patient Safety2</h2></td> 
          </tr> 

         </table> 
         </td> 
        </tr> 
        </table></FORM>

出典

2017-03-03 WebCoder1234

'オプション1 'のコードは' change'関数の外です。 – callback

私はあなたがこのコードの構文エラーがたくさんあると思います。例えば、ここでは、機能変更を閉じているので、あなたのコードの残りの部分は、イベント「変更」

else { 
    $('#Table2').css({'display':'none'}) 
    $('#RequestTypeTableTR').css({'display':'none'}); 
     } 
    });

出典

2017-03-03 13:01:48 mpalma

これはあなたのjavascriptのコードインデントおよび整理するための正しい方法である外です：

$(document).ready(function() { 
    $('#TypeOfChange').change(function() { 
     if ($(this).val() == 'Option 1') { 
      $('#Table1').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table1').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 

     if ($(this).val() == 'Option 2') { 
      $('#Table2').css({'display': 'block'}); 
      $('#RequestTypeTableTR').css({'display': 'block'}); 
     } else { 
      $('#Table2').css({'display': 'none'}); 
      $('#RequestTypeTableTR').css({'display': 'none'}); 
     } 
    }); 
});

を

正しくインデントされたコードは、常に間違いを犯さないようにコード化する必要があります。

出典

2017-03-03 13:05:41

チップとその例をありがとうございます。私はそれを試みるとき、私はまだ同じ結果を得ています。 1つのテーブルのみが表示され、別のオプションを選択するとテーブルは非表示になりますが、他のテーブルは表示されません – WebCoder1234

Try this 



    $(document).ready(function() { 
     $('#TypeOfChange').change(function() { 
      if ($(this).val() == 'Option 1') { 
       $('#Table1').css({'display': 'block'}); 
       $('#Table2').css({'display': 'none'}); 
       $('#RequestTypeTableTR').css({'display': 'block'}); 
      } else if($(this).val() == 'Option 2') { 
       $('#Table2').css({'display': 'block'}); 
       $('#RequestTypeTableTR').css({'display': 'block'}); 
       $('#Table1').css({'display': 'none'}); 
      }else{ 
       $('#Table2').css({'display': 'none'}); 
       $('#RequestTypeTableTR').css({'display': 'none'}); 
       $('#Table1').css({'display': 'none'}); 
      } 
     }); 
    });

elseセクションでメインテーブルを非表示にしています。これは問題ですこれがうまくいきたいです

出典

2017-03-03 13:30:05 CaptainHere

他の提案はありますか？私もこのコードを試しました。そして今、どのテーブルも見せていませんか？私はここで完全に迷っています。ここで私が使用しているJSFiddleがあります：https://jsfiddle.net/bvc1ndbw/ – WebCoder1234

jqueryライブラリをインクルードする必要があります。これは普通のjavascriptではありません。 – CaptainHere

https://jsfiddle.net/bvc1ndbw/2/ – CaptainHere

Javascriptを使用したドロップダウンの選択に基づく表の表示

答えて

関連する問題