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

我认为此代码中存在大量语法错误。例如，您在这里关闭函数更改，因此其余代码在事件“更改”

之外

   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部分中。那就是问题所在希望这有帮助

使用Javascript基于下拉选择显示表

3 个答案: