Question

我有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>

Answer 1

在我看来，你的问题是字符串操作。处理许多选项需要花费大量时间（我期望大约100个选项）。您应该使用数据属性而不是使用;作为一个选项值中多个信息的分隔符。

您的代码可能如下所示：

<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();
    }
});

这样你就不需要为每个更改事件解析这么多字符串，它应该更快：）

Answer 2

如何将产品添加到过滤器中作为类：

<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();
});

或以pirozek的方式

<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();
});

通过这种方式，您还可以避免之前在解决方案中提到的字符串修剪操作。

优化jQuery .each - 隐藏DropDown列表中的选项

2 个答案: