0

我之前有一个类似的问题，但我不得不修改它，因为用户改变了主意。我正在编写一个脚本，如果选择了选项 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>
4

2 回答 2

0

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

由于切换，您的控件在单击后出现和消失。Toggle 使您的代码非常混乱。

<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>
于 2013-03-25T18:28:08.863 回答
0

我认为您在这里编写了很多不必要的代码。jquery toggle 采用布尔参数，当为 true 时将显示所选字段，当为 false 时将隐藏它。

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

这是你想要的？

于 2013-03-25T18:17:48.383 回答