我使用的是优秀的jQuery MultiSelect插件。我遇到的问题是,我想在值发生变化时提交表单。让这个表单工作有各种各样的麻烦,有没有人对如何实现这一点有见解?如果有其他jQuery插件/脚本可以很好地处理这个问题,也可以使用它们。
o8x7eapl1#
您可以尝试修补jQueryMultiSelect(未测试)第三十四行--
multiSelect: function(o, callback ) {
生产线:34 ++
multiSelect: function(o, callback, postback) {
第221行:++
if( postback ) postback($(this));
完整代码
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);
6tr1vspr2#
K,如果因为试图获取ASP.NET回发的值而遇到问题,您可以尝试以下方法。这有点像黑客,但请更改renderOption函数中的行:
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 + '"';
xkftehaa3#
是否尝试过将其直接附加到多选回调?
$(document).ready( function() { $("#control_id").multiSelect(options, function() { $('#myFormId').submit(); }); });
7rfyedvj4#
首先,我把选中的项目保存在一个隐藏字段中,在回发后,我以逗号分隔的格式分配了这些选中的项目。我写了一个document.ready()函数,如下所示,检查下拉列表中选中的项目的值:
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); } }
4条答案
按热度按时间o8x7eapl1#
您可以尝试修补jQueryMultiSelect(未测试)
第三十四行--
生产线:34 ++
第221行:++
完整代码
6tr1vspr2#
K,如果因为试图获取ASP.NET回发的值而遇到问题,您可以尝试以下方法。这有点像黑客,但请更改
renderOption
函数中的行:至:
xkftehaa3#
是否尝试过将其直接附加到多选回调?
7rfyedvj4#
首先,我把选中的项目保存在一个隐藏字段中,在回发后,我以逗号分隔的格式分配了这些选中的项目。我写了一个
document.ready()
函数,如下所示,检查下拉列表中选中的项目的值: