使用过滤器时隐藏/显示“清除”按钮

Question

我在隐藏一个清除按钮时遇到问题，直到选择了过滤器选项。

我有4个asp：DropDownList和一个'Apply Filter'按钮。选择选项后，用户必须单击“应用过滤器”按钮。

在“应用”按钮旁边，我有“清除/重置”按钮，当你点击它时，会将asp：DropDownList重置为默认值。

我想要的是只在任何asp：DropDownList不等于默认值时显示'清除/重置'按钮。请记住，用户可以使用过滤器2＆amp; 3并留下过滤器的1＆amp;默认为4，因此代码必须考虑到这一点。

我想要最好的方法来做到这一点，因为我已经遍布谷歌，无法找到我需要的答案。

我的default.aspx：

 <dl class="filterlist" style="margin-top: -5px">
      <dt>
          <asp:Label ID="Environment" runat="server" Text="Environment" AssociatedControlID="EnvironmentDD" />
      </dt>
      <dd>
          <asp:DropDownList ID="EnvironmentDD" runat="server" ToolTip="Filter the table below by environment." Width="135px" />
      </dd>
      <dt>
          <asp:Label ID="Product" runat="server" Text="Product" AssociatedControlID="ProductDD" />
      </dt>
      <dd>
          <asp:DropDownList ID="ProductDD" runat="server" ToolTip="Filter the table below by product." Width="135px" />
      </dd>
      <dt>
          <asp:Label ID="TestType" runat="server" Text="Test Type" AssociatedControlID="TestTypeDD" />
      </dt>
      <dd>
          <asp:DropDownList ID="TestTypeDD" runat="server" ToolTip="Filter the table below by test type." Width="135px" />
      </dd>
      <dt>
          <asp:Label ID="ProductType" runat="server" Text="Product Type" AssociatedControlID="ProductTypeDD" />
      </dt>
      <dd>
          <asp:DropDownList ID="ProductTypeDD" runat="server" ToolTip="Filter the table below by product type." Width="135px" />
      </dd>
 </dl>

 <div class="button">
      <asp:Button CssClass="butstyle" ID="ApplyFilter" runat="server" onclick="ApplyFilters_Click" Text="Apply Filter(s)" />&nbsp;
      <asp:Button CssClass="butstyle" ID="ClearFilters" runat="server" onclick="ClearFilters_Click" Text="Clear Filter(s)"
                    Tooltip="Click this button to reset any filters set." />
 </div>

asp：DropDownList填充在我的代码后面，因为它们从SQL生成一个asp：DataGrid表。

Answer 1

为所有下拉列表添加一个公共CSSClass，并在这些下拉列表的change上挂钩事件。

例如，我使用了mydropdown类，并将默认值视为1。

jQuery(function ($) {
    $(".mydropdown").on("change", function () {
        var totalDropdown = $(".mydropdown").length;
        var unchangedDropDown = $(".mydropdown").filter(function () {
            return $(this).find("option:selected").val() == 1;
        }).length;

        console.log(unchangedDropDown);
        if (totalDropdown === unchangedDropDown) {
            $(".butstyle").hide();
        } else {
            $(".butstyle").show();
        }

    });
});

Simulation

Answer 2

我没有时间写完整的答案，但这就是我要做的事情：

在ApplyFilter事件处理程序中，检查以确保已选择其中一个下拉列表。如果有，则实际应用您拥有的过滤规则，并设置ClearFilters.Visible = true;您可以通过检查DropDownList.SelectedIndex Property

的值来确定下拉列表是否处于初始状态

然后在你的clear filter事件处理程序中设置ClearFilters.visible = false; （以及删除你拥有的任何过滤器）