Optimalize jQuery .Chase - cache-cache dans Dropdownlist
-
20-12-2019 - |
Question
J'ai 2 optionnels.Lorsque DDLProduct est changé, je cache et montrez quelques options dans ddlpackage.Le mappage entre le produit et le paquet est en valeur dans chaque option de package.Comme ça
<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">
Je divise cette chaîne et comparer si la dernière partie du produit actuellement sélectionné.
pour Dropdownlist Extension Bootstrap utilisée: Bootstrap-Select http://silviomoreto.github.io/bootstrap-Sélectionnez / .
Mais c'est trop lent.Execualy dans 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>
La solution
Votre problème, à mon avis, est cette opération de chaîne.Il faut beaucoup de temps pour traiter de nombreuses options (j'attends environ 100 options).Vous devez utiliser l'attribut de données au lieu d'utiliser;comme délimiteur pour plusieurs informations dans une valeur d'option.
Votre code peut ressembler à ceci:
<option value="134260004;Administrace;AXAPTA" data-id="134260004" data-text="Administrace" data-product="AXAPTA">
Et maintenant vous vient de lire ce dont vous avez besoin avec jQuery:
$("#ddlPackage option").each(function () {
var opt2 = $(this).data('product');
if (opt2 == "") {
$(this).show();
}
else if (opt2 == product)
{
$(this).show();
}
else $(this).hide();
}
});
De cette façon, vous n'aurez pas besoin d'analyser autant de cordes avec chaque événement de changement et il devrait être beaucoup plus rapide :)
Autres conseils
Qu'en est-il d'ajouter des produits à filtrer comme classes:
<option value="134260004;Administrace;AXAPTA" class="Administrace">
et
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not(."+product+")").hide();
$("#ddlPackage option ."+product).show();
});
ou à la manière de Pirozek
<option value="134260004;Administrace;AXAPTA" data-text="Administrace">
et
$("#ddlProduct").change(function () {
var product= $("#ddlProduct option:selected").text().trim();
$("#ddlPackage option:not([data-text='"+product+"'])").hide();
$("#ddlPackage option[data-text='"+product+"']").show();
});
De cette façon, vous pouvez également éviter cette opération de garniture de chaîne mentionnée dans la solution avant.