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 radiobutton

 onclick="twoColorClick()"

将以下代码添加到rbtnOneColor radiobutton

     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>

祝你好运

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

1 个答案: