使用jQuery显示基于RadioButtonList单击选项的ASP.NET表行

时间:2018-01-31 19:04:05

标签: javascript jquery html asp.net

我有一个ASP.net webform,其中RadioButtonList上的选择选项决定了要显示的行。有一个jquery脚本可以处理要显示或隐藏的行,并且它可以工作。

JQUERY

<script>
    $(document).ready(function () { 
        $("#<%= rblP.ClientID%> input[type='radio']").click(function () {
            // display appropriate textbox based on clicked radio button
            if ($(this).is(':checked') && $(this).val() == "1") {
                $('#<%=yes_tr.ClientID %>').show();
                $('#<%=no_tr.ClientID %>').hide();
            } else if ($(this).is(':checked') && $(this).val() == "2") {
                $('#<%=no_tr.ClientID %>').show();
                $('#<%=yes_tr.ClientID %>').hide();
            }
        });
    });
</script>

HTML

<tr>
    <td>SOME TEXT</td>
    <td>
        <asp:RadioButtonList ID="rblP" RepeatDirection="Horizontal" RepeatLayout="Table"
            Width="150px" Height="20px" runat="server">
            <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
            <asp:ListItem Text="No" Value="2"></asp:ListItem>
        </asp:RadioButtonList>
    </td>
</tr>
<tr id="yes_tr" style="display: none;" runat="server">
    <td>SOME TEXT</td>
    <td>
        <asp:TextBox ID="txtM" runat="server" Width="201px" MaxLength="35"></asp:TextBox>
    </td>
</tr>
<tr id="no_tr" style="display: none;" runat="server">
    <td>SOME TEXT</td>
    <td>
    <asp:TextBox ID="txtE" runat="server" Width="200px" MaxLength="35"></asp:TextBox>
    </td>
</tr>

不幸的是,当我将文本框(在上面的HTML中)更改为下拉列表时,只要在下拉列表中进行选择,脚本就会隐藏“no_tr”和“yes_tr”。如何将脚本修改为DropDownLists帐户。

<asp:DropDownList ID="ddlE" runat="server" Width="200px" ></asp:DropDownList>

为简单起见,省略了下拉列表的某些编码

0 个答案:

没有答案