使用Java腳本基於下拉列表顯示表

Question

早上好，我遇到了一個問題，即根據下拉選擇切換顯示和隱藏哪些元素。 我已經嘗試了很多事情，但是看不到它能正常工作。 下面是我正在使用的HTML代碼的示例：

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>

Answer 1

我認為您在此代碼中有很多語法錯誤。 例如，這里您要關閉函數更改，因此其余代碼不在事件“ change”之外

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

Answer 2

這是縮進和組織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'});
        }
    });
});

您應該始終編寫適當縮進的代碼，因為它可以防止您犯很多錯誤。

Answer 3

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部分中。 這是問題，希望對您有幫助

使用Java腳本基於下拉列表顯示表

問題描述

3 個解決方案

解決方案1
0 2017-03-03 13:01:48

解決方案2
0 2017-03-03 13:05:41

解決方案3
0 2017-03-03 13:30:05

使用Java腳本基於下拉列表顯示表

問題描述

3 個解決方案

解決方案1 0 2017-03-03 13:01:48

解決方案2 0 2017-03-03 13:05:41

解決方案3 0 2017-03-03 13:30:05

解決方案1
0 2017-03-03 13:01:48

解決方案2
0 2017-03-03 13:05:41

解決方案3
0 2017-03-03 13:30:05