[英]Optimalize jQuery .each - hiding options in DropDownList
我有2个选项集。 更改ddlProduct后,我将在ddlPackage中隐藏并显示一些选项。 产品和包装之间的映射在每个包装选项中都很重要。 像这样
<select name="ctl00$MidContent$ddlPackage" class="selectpicker" id="ddlPackage" style="display: none;" data-width="100%" data-style="btn-own btn-select hideDisabled">
<option value="134260004;Administrace;AXAPTA">
我正在拆分此字符串,并将最后一部分与当前选定的产品进行比较。
对于DropDownList使用的是bootstrap扩展名:bootstrap-select http://silviomoreto.github.io/bootstrap-select/ 。
但这太慢了。 在IE中经验丰富。
$("#ddlProduct").change(function () {
var product = $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option").each(function () {
var optValues = $(this).val().split(";");
var opt2 = optValues[2].trim();
if (opt2 == "") {
$(this).show();
}
else {
if (opt2 == product) {
$(this).show();
}
else {
$(this).hide();
}
}
});
$("#ddlPackage").val($("#ddlPackage option:first").val());
$("#ddlPackage").selectpicker('refresh');
<asp:Panel ID="Panel39" runat="server" CssClass="row">
<asp:Panel ID="Panel40" runat="server" CssClass="row compenserow col-lg-4 col-md-4 col-sm-6">
<asp:Label ID="Label29" runat="server" CssClass="col-lg-4 col-md-4 col-sm-4 col-xs-4">Prudukt: </asp:Label>
<asp:Panel ID="Panel63" runat="server" CssClass="bootstrap-select col-lg-8 col-md-8 col-sm-8 col-xs-8">
<asp:DropDownList ID="ddlProduct" data-style="btn-own btn-select" data-width="100%" runat="server" CssClass="selectpicker" ClientIDMode="Static"></asp:DropDownList>
</asp:Panel>
</asp:Panel>
<asp:Panel ID="Panel41" runat="server" CssClass="row compenserow col-lg-4 col-md-4 col-sm-6">
<asp:Label ID="Label31" runat="server" CssClass="col-lg-4 col-md-4 col-sm-4 col-xs-4">Balík: </asp:Label>
<asp:Panel ID="Panel64" runat="server" CssClass="bootstrap-select col-lg-8 col-md-8 col-sm-8 col-xs-8">
<asp:DropDownList ID="ddlPackage" data-style="btn-own btn-select hideDisabled" data-width="100%" runat="server" CssClass="selectpicker" ClientIDMode="Static"></asp:DropDownList>
</asp:Panel>
</asp:Panel>
</asp:Panel>
我认为您的问题是字符串操作。 许多选项需要花费大量时间(我预计大约有100个选项)。 您应该使用data属性而不是; 作为一个选项值中多个信息的定界符。
您的代码如下所示:
<option value="134260004;Administrace;AXAPTA" data-id="134260004" data-text="Administrace" data-product="AXAPTA">
现在,您只需阅读jQuery所需的内容:
$("#ddlPackage option").each(function () {
var opt2 = $(this).data('product');
if (opt2 == "") {
$(this).show();
}
else if (opt2 == product)
{
$(this).show();
}
else $(this).hide();
}
});
这样,您将不需要在每个更改事件中解析那么多的字符串,它应该快得多:)
如何添加要过滤为类的产品:
<option value="134260004;Administrace;AXAPTA" class="Administrace">
和
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not(."+product+")").hide();
$("#ddlPackage option ."+product).show();
});
或以比罗泽克的方式
<option value="134260004;Administrace;AXAPTA" data-text="Administrace">
和
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not([data-text='"+product+"'])").hide();
$("#ddlPackage option[data-text='"+product+"']").show();
});
这样,您还可以避免前面解决方案中提到的字符串修剪操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.