c# - Hide/Display 'Clear' Button when Filter has been used -
i have problem in hiding clear button until filter options have been selected.
i have 4 asp:dropdownlist's , 'apply filter' button. when option selected user has click 'apply filter' button.
beside 'apply' button, have 'clear/reset' button when click it, reset asp:dropdownlist's defaults.
what want display 'clear/reset' button when of asp:dropdownlist's not equal default. please bar in mind user use filter 2 & 3 , leave filter's 1 & 4 default's code have take in mind.
i want best way have been on google , cant find answer need.
my 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 table below 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 table below 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 table below 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 table below product type." width="135px" /> </dd> </dl> <div class="button"> <asp:button cssclass="butstyle" id="applyfilter" runat="server" onclick="applyfilters_click" text="apply filter(s)" /> <asp:button cssclass="butstyle" id="clearfilters" runat="server" onclick="clearfilters_click" text="clear filter(s)" tooltip="click button reset filters set." /> </div>
the asp:dropdownlist's populated in code behind generate asp:datagrid table sql.
add common cssclass drop-downs , hook event on change
of these drop-down.
for example, have used mydropdown
class , considering default value 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(); } }); });
Comments
Post a Comment