Question

之前我遇到过类似的问题，但我不得不修改它，因为用户改变了主意。我正在编写一个脚本，如果选择了选项0，它应该显示“提醒”，否则将其隐藏。如果选择了选项2，则应取消隐藏“cc”，否则将其隐藏。我的问题是，一旦事件被触发，无论选项0或2如何，两个区域都会打开。我只是想知道我是否可以帮助他们分开工作。这是JS：

 $('#rbPType').change(function () {
 var op1 = $(this).attr('value', '0');
 var op2 = $(this).attr('value', '2');

 if (op1) {
    $('#remind').fadeIn();
 } else {
    $('#remind').fadeOut();
 }

 $(this).change(function () {
     $('#remind').toggle();
 });

 if (op2) {
     $('#cc').fadeIn();
 } else {
     $('#cc').fadeOut();
 }

 $(this).change(function () {
     $('#cc').toggle();
 });

 });

HTML

<div class="another">
<label for="rbPType">Select One</label>
<asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static">
    <asp:ListItem Value="0" Text="1"></asp:ListItem>
    <asp:ListItem Value="1" Text="2"></asp:ListItem>
    <asp:ListItem Value="2" Text="3"></asp:ListItem>
</asp:RadioButtonList>
</div>
<div id="remind">
<label for="ddlReminderMonth">Remind Me</label>
<asp:DropDownList runat="server" ID="ddlReminderMonth" AppendDataBoundItems="true" AutoPostBack="false" />
</div>
<div id="cc">
<label for="ddlReminderMonth">Remind Me Two</label>
<asp:DropDownList runat="server" ID="ddlReminderMonth" AppendDataBoundItems="true" AutoPostBack="false" />
</div>

Answer 1

我认为你在这里写了很多不必要的代码。 jquery toggle接受boolean参数，当true表示选中的字段时，false表示隐藏它。

    $('#rbPType').change(function () {
     var op1 = $(this).attr('value', '0');
     var op2 = $(this).attr('value', '2');
     $('#remind').toggle(op1);
     $('#cc').toggle(op2);
    });

这是你在找什么？

Answer 2

您不能拥有两个具有相同ddlReminderMonth的下拉列表。

由于切换，您的控件在单击后会显示和消失。切换使您的代码真的很混乱。

<div class="another">
    <label for="rbPType">
        Select One</label>
    <asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static">
        <asp:ListItem Value="0" Text="1"></asp:ListItem>
        <asp:ListItem Value="1" Text="2"></asp:ListItem>
        <asp:ListItem Value="2" Text="3"></asp:ListItem>
    </asp:RadioButtonList>
</div>
<div id="remind">
    <label for="ddlReminderMonth">
        Remind Me</label>
    <asp:DropDownList runat="server" ID="ddlReminderMonth1" AppendDataBoundItems="true"
        AutoPostBack="false" />
</div>
<div id="cc">
    <label for="ddlReminderMonth">
        Remind Me Two</label>
    <asp:DropDownList runat="server" ID="ddlReminderMonth2" AppendDataBoundItems="true"
        AutoPostBack="false" />
</div>


<script>
    $('#rbPType').change(function () {
        var value = $('#rbPType input:checked').val();

        if (value == '0') {
            $('#remind').fadeIn();
            $('#cc').fadeOut();
        }
        else if (value == '1') {
            // Show or hide
        }
        else { // value == '2'
            $('#remind').fadeOut();
            $('#cc').fadeIn();
        }
    }); 
</script>

根据所选的radiobuttonlist输入隐藏和显示多个区域

2 个答案: