2017-03-03 67 views
0

早上好,我遇到问题切换基于下拉选择显示和隐藏哪些元素。我尝试了很多东西,但看不到它的工作。下面是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> 

+0

您的'选项1'代码不在'change'函数中。 – callback

回答

0

我想你在这段代码有很多语法错误。 例如,在这里您要关闭的功能变化,使你的代码的其余部分是外事件“改变”

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

这是缩进和组织你的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'}); 
     } 
    }); 
}); 

你应该总是编码一个正确缩进的代码,因为它可以防止你犯很多错误。

+0

谢谢你的提示和例子。当我尝试它时,我仍然得到相同的结果。只有一个表格显示,然后当我选择不同的选项时,表格会隐藏,但另一个表格不显示 – WebCoder1234

0
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'}); 
      } 
     }); 
    }); 

你都躲在主表的其他部分。这是问题 希望这可以帮助

+0

还有其他建议吗?我也试过这个代码。现在没有任何表格正在显示?我完全迷失在这里。这里是我使用的JSFiddle:https://jsfiddle.net/bvc1ndbw/ – WebCoder1234

+0

你需要包含jQuery库。这不是纯javascript。 – CaptainHere

+0

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