Question

I have a multiselect on my page using asmselect which works wonderfully.

I am trying to add another multiselect to the page, but encountering problems. There are about 11,000 options which causes the asmselect take forever to load since it’s looping through the whole list in the asmselect jquery code. Even if I could improve the load time, it wouldn’t be too easy for the user to look through the entire list to find their option.

My thoughts were to add button which would pop-up a dialog (I’m successfully using dialogs elsewhere on the page for adding options to select lists), where the user can enter some filter info and then can select from a filtered list. So, they type 101 and it lists options “10100”, “22101”, “31015” etc. They select “10100”. “10100” displays on the main screen as selected. They can then hit the button again and enter “105” which will give them a new filtered select list and they select “10500” which now shows along with “10100” on the main screen.

First question, is there a better way to handle this?

Second, can I use the formatting for asmselect to display my newly selected items so that it matches with the formatting of my other asmselect and use the built-in functionality with the “remove” for unselecting an item. I’m looking at the asmselect code, but my jquery knowledge is very limited and I can’t figure it out. Could someone point me in the right direction?

Answer 1

I achieved this by having a dropdown list of the options in a dialog using a droplistFilter plugin. When an option was selected from the dropdown and the “add” button of the dialog was clicked, the option was added to my multiselect (using the asmselect plugin) and set to selected and I disabled the option from the dropdown list. In my $(document).ready(function() { I set each selected option in my multiselect to disabled in the dropdown.

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