检查/取消选中后，asp.net单选按钮显示/隐藏下拉列表

Question

我一直试图创建一个单选按钮，该按钮在未选中和选中时显示/隐藏两个下拉列表。

我的问题是，每当我尝试检查另一个单选按钮时，另一个单选按钮的下拉列表都不会按预期隐藏。 例如，如果我检查了rbtnTwocolor ，则不会隐藏rbtnOnecolor的下拉列表。

我想使用单选按钮列表，但无法在单选按钮列表项之间插入下拉列表。

<asp:RadioButton ID="rbtnFullColor" Text="Full-Color" runat="server" GroupName="rbtnlistColors" /><br />
<asp:RadioButton ID="rbtnTwoColor" Text="Two-Color" data-toggle="collapse" data-target="#twocolor" runat="server" GroupName="rbtnlistColors" /><br />
<div id="twocolor" class="collapse">
    <asp:DropDownList ID="ddlTwoColor" runat="server"></asp:DropDownList>
</div>
<asp:RadioButton ID="rbtnOneColor" Text="One-Color" data-toggle="collapse" data-target="#onecolor" runat="server" GroupName="rbtnlistColors" /><br />
<div id="onecolor" class="collapse">
    <asp:DropDownList ID="ddlOneColor" runat="server"></asp:DropDownList>
</div>

Answer 1

对于选择单选按钮时的显示/隐藏下拉菜单，可以使用以下方法：

1：在客户端使用jquery：

  <script> $(document).ready(function () { $('#rbtnTwoColor').change( function () { if ($(this).is(':checked')) { $('#twocolor').show(); $('#onecolor').hide(); } }); $('#rbtnOneColor').change( function () { if ($(this).is(':checked')) { $('#onecolor').show(); $('#twocolor').hide(); } }); }); </script> 

2：使用服务器端事件（OnCheckedChanged）：

标记：

  <asp:RadioButton ID="rbtnFullColor" Text="Full-Color" runat="server" GroupName="rbtnlistColors" /><br /> <asp:RadioButton ID="rbtnTwoColor" Text="Two-Color" data-toggle="collapse" data-target="#twocolor"runat="server" GroupName="rbtnlistColors" OnCheckedChanged="rbtnTwoColor_CheckedChanged" AutoPostBack="true" /><br /> <div id="twocolor" class="collapse"> <asp:DropDownList ID="ddlTwoColor" runat="server"></asp:DropDownList> </div> <asp:RadioButton ID="rbtnOneColor" Text="One-Color" data-toggle="collapse" data-target="#onecolor" runat="server" GroupName="rbtnlistColors" OnCheckedChanged="rbtnOneColor_CheckedChanged" AutoPostBack="true" /><br /> <div id="onecolor" class="collapse"> <asp:DropDownList ID="ddlOneColor" runat="server"></asp:DropDownList> </div> 

和后面的代码：

    protected void rbtnTwoColor_CheckedChanged(object sender, EventArgs e)
    {
        ddlTwoColor.Visible = true;
        ddlOneColor.Visible = false;
    }

    protected void rbtnOneColor_CheckedChanged(object sender, EventArgs e)
    {
        ddlOneColor.Visible = true;
        ddlTwoColor.Visible = false;
    }

3：在客户端使用javascript：将以下代码添加到rbtnTwoColor单选按钮

  onclick="twoColorClick()" 

将以下代码添加到rbtnOneColor单选按钮

  onclick="oneColorClick()" 

现在在body标签的末尾添加此代码

 <script> function oneColorClick() { document.getElementById('onecolor').style.display = 'block'; document.getElementById('twocolor').style.display = 'none'; } function twoColorClick() { document.getElementById('twocolor').style.display = 'block'; document.getElementById('onecolor').style.display = 'none'; } </script> 

祝好运