顯示錶格基於下拉選擇使用Javascript

早上好，我遇到問題切換基於下拉選擇顯示和隱藏哪些元素。我嘗試了很多東西，但看不到它的工作。下面是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

謝謝你的提示和例子。當我嘗試它時，我仍然得到相同的結果。只有一個表格顯示，然後當我選擇不同的選項時，表格會隱藏，但另一個表格不顯示 – 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'}); 
      } 
     }); 
    });

你都躲在主表的其他部分。這是問題希望這可以幫助

來源

2017-03-03 13:30:05 CaptainHere

還有其他建議嗎？我也試過這個代碼。現在沒有任何表格正在顯示？我完全迷失在這裏。這裏是我使用的JSFiddle：https://jsfiddle.net/bvc1ndbw/ – WebCoder1234

你需要包含jQuery庫。這不是純javascript。 – CaptainHere

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

顯示錶格基於下拉選擇使用Javascript

回答

相關問題