1. 首页
  2. 问答
  3. jquery多选提交表单

jquery多选提交表单

2009-02-26 130 views
0

我使用优秀的jQuery MultiSelect插件。jquery多选提交表单

我的问题是，我想提交表格时，值已经改变。 让这一个工作有种种麻烦，有没有人有如何实现这一点洞察力？

如果有任何处理这个很好，也打开替代jQuery插件/脚本。

来源

2009-02-26 Toby Hede

回答

2

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

线：34 -

multiSelect: function(o, callback) {

线：34 ++

multiSelect: function(o, callback, postback) {

行221：++

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

完全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);

来源

2009-02-26 23:27:01 garrow

+0

根据这个解决方案发现了一个非常狡猾的黑客攻击（涉及到与我的特定要求相关的global_variables），但是它的实际工作值正常。干杯 – 2009-02-27 07:43:49

1

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

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

来源

2009-02-26 22:14:47

+0

可以，但是回调被称为每一个选项被选中/未选中的时间，而不是到隐藏/结束事件。因此，该页面将在选择过程中提交。 – 2009-02-26 22:29:55

0

首先我没有保存在hiddenfield和后后选择的项目后，我分配在一个逗号分隔的格式，这些检查项目。我写了一个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); 
    } 
}

来源

2010-11-09 11:18:20

2

K，如果因为你试图获得一个ASP.NET回发，你可以将该值中运行的问题尝试这个。它是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 + '"';

来源

2011-02-18 20:33:16 michael

相关问题

 相关问题