Question

我正在使用优秀的jQuery MultiSelect插件。

我遇到的问题是我想在值发生变化时提交表单。让这个工作有各种各样的麻烦，有没有人能够深入了解如何实现这个目标？

如果有任何处理这个很好的话，也可以使用其他jQuery插件/脚本。

Answer 1

您可以尝试修补jQueryMultiSelect（未经测试）

行：34 -

multiSelect: function(o, callback ) {

行：34 ++

multiSelect: function(o, callback, postback) {

第221行：++

if( postback ) postback($(this));

Full Codez

if(jQuery) (function($){

    $.extend($.fn, {
        multiSelect: function(o, callback, postback) {
            // Default options
            if( !o ) var o = {};
            if( o.selectAll == undefined ) o.selectAll = true;
            if( o.selectAllText == undefined ) o.selectAllText = "Select All";
            if( o.noneSelected == undefined ) o.noneSelected = 'Select options';
            if( o.oneOrMoreSelected == undefined ) o.oneOrMoreSelected = '% selected';

            // Initialize each multiSelect
            $(this).each( function() {
                var select = $(this);
                var html = '<input type="text" readonly="readonly" class="multiSelect" value="" style="cursor: default;" />';
                html += '<div class="multiSelectOptions" style="position: absolute; z-index: 99999; display: none;">';
                if( o.selectAll ) html += '<label class="selectAll"><input type="checkbox" class="selectAll" />' + o.selectAllText + '</label>';
                $(select).find('OPTION').each( function() {
                    if( $(this).val() != '' ) {
                        html += '<label><input type="checkbox" name="' + $(select).attr('name') + '" value="' + $(this).val() + '"';
                        if( $(this).attr('selected') ) html += ' checked="checked"';
                        html += ' />' + $(this).html() + '</label>';
                    }
                });
                html += '</div>';
                $(select).after(html);

                // Events
                $(select).next('.multiSelect').mouseover( function() {
                    $(this).addClass('hover');
                }).mouseout( function() {
                    $(this).removeClass('hover');
                }).click( function() {
                    // Show/hide on click
                    if( $(this).hasClass('active') ) {
                        $(this).multiSelectOptionsHide();
                    } else {
                        $(this).multiSelectOptionsShow();
                    }
                    return false;
                }).focus( function() {
                    // So it can be styled with CSS
                    $(this).addClass('focus');
                }).blur( function() {
                    // So it can be styled with CSS
                    $(this).removeClass('focus');
                });

                // Determine if Select All should be checked initially
                if( o.selectAll ) {
                    var sa = true;
                    $(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT:checkbox').not('.selectAll').each( function() {
                        if( !$(this).attr('checked') ) sa = false;
                    });
                    if( sa ) $(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT.selectAll').attr('checked', true).parent().addClass('checked');
                }

                // Handle Select All
                $(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT.selectAll').click( function() {
                    if( $(this).attr('checked') == true ) $(this).parent().parent().find('INPUT:checkbox').attr('checked', true).parent().addClass('checked'); else $(this).parent().parent().find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
                });

                // Handle checkboxes
                $(select).next('.multiSelect').next('.multiSelectOptions').find('INPUT:checkbox').click( function() {
                    $(this).parent().parent().multiSelectUpdateSelected(o);
                    $(this).parent().parent().find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
                    $(this).parent().parent().prev('.multiSelect').focus();
                    if( !$(this).attr('checked') ) $(this).parent().parent().find('INPUT:checkbox.selectAll').attr('checked', false).parent().removeClass('checked');
                    if( callback ) callback($(this));
                });

                // Initial display
                $(select).next('.multiSelect').next('.multiSelectOptions').each( function() {
                    $(this).multiSelectUpdateSelected(o);
                    $(this).find('INPUT:checked').parent().addClass('checked');
                });

                // Handle hovers
                $(select).next('.multiSelect').next('.multiSelectOptions').find('LABEL').mouseover( function() {
                    $(this).parent().find('LABEL').removeClass('hover');
                    $(this).addClass('hover');
                }).mouseout( function() {
                    $(this).parent().find('LABEL').removeClass('hover');
                });

                // Keyboard
                $(select).next('.multiSelect').keydown( function(e) {
                    // Is dropdown visible?
                    if( $(this).next('.multiSelectOptions').is(':visible') ) {
                        // Dropdown is visible
                        // Tab
                        if( e.keyCode == 9 ) {
                            $(this).addClass('focus').trigger('click'); // esc, left, right - hide
                            $(this).focus().next(':input').focus();
                            return true;
                        }

                        // ESC, Left, Right
                        if( e.keyCode == 27 || e.keyCode == 37 || e.keyCode == 39 ) {
                            // Hide dropdown
                            $(this).addClass('focus').trigger('click');
                        }
                        // Down
                        if( e.keyCode == 40 ) {
                            if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
                                // Default to first item
                                $(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
                            } else {
                                // Move down, cycle to top if on bottom
                                $(this).next('.multiSelectOptions').find('LABEL.hover').removeClass('hover').next('LABEL').addClass('hover');
                                if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
                                    $(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
                                }
                            }
                            return false;
                        }
                        // Up
                        if( e.keyCode == 38 ) {
                            if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
                                // Default to first item
                                $(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
                            } else {
                                // Move up, cycle to bottom if on top
                                $(this).next('.multiSelectOptions').find('LABEL.hover').removeClass('hover').prev('LABEL').addClass('hover');
                                if( !$(this).next('.multiSelectOptions').find('LABEL').hasClass('hover') ) {
                                    $(this).next('.multiSelectOptions').find('LABEL:last').addClass('hover');
                                }
                            }
                            return false;
                        }
                        // Enter, Space
                        if( e.keyCode == 13 || e.keyCode == 32 ) {
                            // Select All
                            if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').hasClass('selectAll') ) {
                                if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked') ) {
                                    // Uncheck all
                                    $(this).next('.multiSelectOptions').find('INPUT:checkbox').attr('checked', false).parent().removeClass('checked');
                                } else {
                                    // Check all
                                    $(this).next('.multiSelectOptions').find('INPUT:checkbox').attr('checked', true).parent().addClass('checked');
                                }
                                $(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
                                if( callback ) callback($(this));
                                return false;
                            }
                            // Other checkboxes
                            if( $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked') ) {
                                // Uncheck
                                $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked', false);
                                $(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
                                $(this).next('.multiSelectOptions').find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
                                // Select all status can't be checked at this point
                                $(this).next('.multiSelectOptions').find('INPUT:checkbox.selectAll').attr('checked', false).parent().removeClass('checked');
                                if( callback ) callback($(this));
                            } else {
                                // Check
                                $(this).next('.multiSelectOptions').find('LABEL.hover INPUT:checkbox').attr('checked', true);
                                $(this).next('.multiSelectOptions').multiSelectUpdateSelected(o);
                                $(this).next('.multiSelectOptions').find('LABEL').removeClass('checked').find('INPUT:checked').parent().addClass('checked');
                                if( callback ) callback($(this));
                            }
                        }
                        return false;
                    } else {
                        // Dropdown is not visible
                        if( e.keyCode == 38 || e.keyCode == 40 || e.keyCode == 13 || e.keyCode == 32 ) { // down, enter, space - show
                            // Show dropdown
                            $(this).removeClass('focus').trigger('click');
                            $(this).next('.multiSelectOptions').find('LABEL:first').addClass('hover');
                            return false;
                        }
                        //  Tab key
                        if( e.keyCode == 9 ) {
                            // Shift focus to next INPUT element on page
                            $(this).focus().next(':input').focus();
                            return true;
                        }
                    }
                    // Prevent enter key from submitting form
                    if( e.keyCode == 13 ) return false;
                });

                // Eliminate the original form element
                $(select).remove();
            });

        },

        // Hide the dropdown
        multiSelectOptionsHide: function() {
            $(this).removeClass('active').next('.multiSelectOptions').hide();
            if( postback ) postback($(this));
        },

        // Show the dropdown
        multiSelectOptionsShow: function() {
            // Hide any open option boxes
            $('.multiSelect').multiSelectOptionsHide();
            $(this).next('.multiSelectOptions').find('LABEL').removeClass('hover');
            $(this).addClass('active').next('.multiSelectOptions').show();

            // Position it
            var offset = $(this).offset();
            $(this).next('.multiSelectOptions').css({ top:  offset.top + $(this).outerHeight() + 'px' });
            $(this).next('.multiSelectOptions').css({ left: offset.left + 'px' });

            // Disappear on hover out
            multiSelectCurrent = $(this);
            var timer = '';
            $(this).next('.multiSelectOptions').hover( function() {
                clearTimeout(timer);
            }, function() {
                timer = setTimeout('$(multiSelectCurrent).multiSelectOptionsHide(); $(multiSelectCurrent).unbind("hover");', 250);
            });

        },

        // Update the textbox with the total number of selected items
        multiSelectUpdateSelected: function(o) {
            var i = 0, s = '';
            $(this).find('INPUT:checkbox:checked').not('.selectAll').each( function() {
                i++;
            })
            if( i == 0 ) {
                $(this).prev('INPUT.multiSelect').val( o.noneSelected );
            } else {
                if( o.oneOrMoreSelected == '*' ) {
                    var display = '';
                    $(this).find('INPUT:checkbox:checked').each( function() {
                        if( $(this).parent().text() != o.selectAllText ) display = display + $(this).parent().text() + ', ';
                    });
                    display = display.substr(0, display.length - 2);
                    $(this).prev('INPUT.multiSelect').val( display );
                } else {
                    $(this).prev('INPUT.multiSelect').val( o.oneOrMoreSelected.replace('%', i) );
                }
            }
        }

    });

})(jQuery);

Answer 2

K，如果因为试图获取ASP.NET回发的值而遇到问题，可以试试这个。这是一个hack但是在renderOption函数中改变了一行：

var html = '<label><input type="checkbox" name="' + id + '[]" value="' + option.value + '"';

为：

var html = '<label><input type="checkbox" name="' + id.replace(/_/g,"$") + '" value="' + option.value + '"';

Answer 3

您是否尝试将其直接附加到多选回调？

$(document).ready( function() {
    $("#control_id").multiSelect(options, function() {
        $('#myFormId').submit();
    });
});

Answer 4

首先，我将所选项目保存在隐藏字段中，在回发后，我以逗号分隔格式分配了这些选中的项目。我写了一个document.ready()函数，如下所示，检查所选内容的值到下拉列表中：

var Quali = document.getElementById('<%=hdCommaList.ClientID%>').value; 
var qualiList = Quali.split(',');
for (var dx = 0; dx < qualiList.length; dx++) {
    if (!(qualiList[dx] == '')) {
        $('input[type="checkbox"][value="' + qualiList[dx] + '"]').attr('checked', true).trigger('click').attr('checked', true);
    }
}

jquery MultiSelect在变更时提交表格

4 个答案: