试图为很长的选择列表修改 asmselect答案

【问题标题】：trying to modify asmselect for very long selectlist试图为很长的选择列表修改 asmselect
【发布时间】：2011-02-22 20:36:55
【问题描述】：

我的页面上有一个使用 asmselect 的多选功能，效果非常好。

我正在尝试向页面添加另一个多选，但遇到了问题。大约有 11,000 个选项会导致 asmselect 永远加载，因为它在 asmselect jquery 代码中循环遍历整个列表。即使我可以缩短加载时间，但用户浏览整个列表以找到他们的选项也不是一件容易的事。

我的想法是添加会弹出对话框的按钮（我成功地在页面上的其他地方使用对话框来添加选项以选择列表），用户可以在其中输入一些过滤器信息，然后可以从过滤器中进行选择列表。因此，他们输入 101 并列出选项“10100”、“22101”、“31015”等。他们选择“10100”。 “10100”显示在选定的主屏幕上。然后他们可以再次点击按钮并输入“105”，这将为他们提供一个新的过滤选择列表，然后他们选择“10500”，该列表现在与“10100”一起显示在主屏幕上。

第一个问题，有没有更好的方法来处理这个问题？

其次，我可以使用 asmselect 的格式来显示我新选择的项目，以便它与我的其他 asmselect 的格式匹配，并使用带有“删除”的内置功能来取消选择项目。我正在查看 asmselect 代码，但我的 jquery 知识非常有限，我无法弄清楚。有人能指出我正确的方向吗？

【问题讨论】：

除了“开始输入列表选项”之外，您还必须添加一些其他过滤条件。例如，假设这些选项是订单号，系统中有 10K 个订单。让用户首先过滤什么类型的订单（已发货，未发货），然后继续按其他条件过滤列表，以使您的列表更易于管理。
没有其他过滤条件。

标签： jquery asp.net-mvc jquery-plugins multi-select asmselect

【解决方案1】：

我通过使用droplistFilter plugin 在对话框中提供选项下拉列表来实现这一点。当从下拉列表中选择一个选项并单击对话框的“添加”按钮时，该选项被添加到我的多选中（使用 asmselect 插件）并设置为选中，我从下拉列表中禁用了该选项。在我的$(document).ready(function() { 中，我在下拉菜单中将多选中的每个选定选项设置为禁用。

        $('#Vendor_IDs').asmSelect({
            sortable: false
        });
        $('#vendor').droplistFilter();
        $('#Vendor_IDs option:selected', this).each(function () {
            $("#vendor option[value='" + $(this).val() + "']").attr("disabled", true);
        });

        $('#popupAddVendor').dialog(
        {
            autoOpen: false,
            modal: true,
            width: 600,
            buttons:
            {
                'Add': function () {
                    var v = $('#vendor').val();
                    if (v.length > 1) {
                        $('#Vendor_IDs').append($('<option></option>').val(v).html($('#vendor option:selected').text()).attr("selected", true));
                        $('#Vendor_IDs').change();
                        $('#vendor option:selected').attr("disabled", true).attr("selected", false);
                        $('#vendor').attr('selectedIndex', 0);
                    }
                    $(this).dialog('close');

                },
                'Cancel': function () {
                    $(this).dialog('close');
                }
            }
        });

【讨论】：