Fix #740 Group label inside an li tag

ehynds · Feb 2, 2018 · bb7e512 · bb7e512
1 parent 5f55116
commit bb7e512
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/css/jquery.multiselect.css b/css/jquery.multiselect.css
@@ -19,7 +19,7 @@
 .ui-multiselect-checkboxes li { clear:both; font-size:0.9em; list-style: none; padding-right:3px; }
 .ui-multiselect-checkboxes > .ui-multiselect-optgroup { padding: 3px; }
 .ui-multiselect-columns { display: inline-block; vertical-align: top; }
-.ui-multiselect-checkboxes > .ui-multiselect-optgroup > a { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
+.ui-multiselect-checkboxes > .ui-multiselect-optgroup > li > a { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
 
 @media print{
     .ui-multiselect-menu {display: none;}

diff --git a/src/jquery.multiselect.filter.js b/src/jquery.multiselect.filter.js
@@ -181,7 +181,7 @@
       // show/hide optgroups
       $groups.each(function() {
         var $this = $(this);
-        if (!$this.children('li').filter(':visible').length)
+        if (!$this.children(':not(:first-child)').filter(':visible').length)
           $this.hide();
       });
       this.instance._setMenuHeight();

diff --git a/src/jquery.multiselect.js b/src/jquery.multiselect.js
@@ -311,7 +311,11 @@
                 .addClass('ui-multiselect-optgroup' 
                           + (self.options.groupColumns ? ' ui-multiselect-columns' : '') 
                           + (elem.className && ' ') + elem.className)
-                .append( $( document.createElement('a') ).text( elem.getAttribute('label') ), options);
+          var $label = $( document.createElement('li') )
+                        .addClass('ui-multiselect-optgroup-label')
+                        .append( $( document.createElement('a') )                        
+                        .text( elem.getAttribute('label') ) );
+          $optionGroup.append($label, options)
 
           list.push($optionGroup);
         }
@@ -470,7 +474,7 @@
     _bindMenuEvents: function() {
       var self = this;
       // optgroup label toggle support
-      this.$menu.on('click.multiselect', '.ui-multiselect-optgroup a', function(e) {
+      this.$menu.on('click.multiselect', '.ui-multiselect-optgroup-label', function(e) {
         e.preventDefault();
 
         var $this = $(this);