first pass on optgroup feature

3 files changed, 60 insertions, 30 deletions

diff --git a/css/multi-select.css b/css/multi-select.css
index 68c3b17..2d993b9 100644
--- a/css/multi-select.css
+++ b/css/multi-select.css
@@ -21,22 +21,27 @@
 }
 
 .ms-container ul{
+  margin: 0;
+  list-style-type: none;
+}
+
+.ms-container ul.ms-list{
   width: 170px;
   height: 200px;
-  margin: 0;
   padding: 1px 0px;
-  list-style-type: none;
+  
   overflow-y: auto;
 
 }
 
-.ms-container .ms-selectable li, .ms-container .ms-selection li{
+.ms-container .ms-selectable li.ms-elem-selectable,
+.ms-container .ms-selection li.ms-elem-selectable{
   border-bottom: 1px #eee solid;
   padding: 1px 10px;
   color: #555;
 }
 
-.ms-container .ms-selection li{
+.ms-container .ms-selection li.ms-elem-selected{
   padding-left: 22px;
   color: #101010;
 }
@@ -46,7 +51,13 @@
   color: #aaa;
 }
 
-.ms-container li:hover{
+.ms-container .ms-optgroup-label{
+  padding: 5px 0px 0px 5px;
+  color: #999;
+}
+
+.ms-container li.ms-elem-selectable:hover,
+.ms-container .ms-selection li:hover{
   cursor: pointer;
   background-color: #eee;
   color: #000;
diff --git a/demos.html b/demos.html
index d4ed206..a86c984 100644
--- a/demos.html
+++ b/demos.html
@@ -89,17 +89,23 @@
             <br/><br/>
              <form>
                 <select multiple='multiple' id='outsideCountries' class='multiselect'>
-                  <option value='fr'>France</option>
-                  <option value='ca'>Canada</option>
-                  <option value='ar'>Argentina</option>
-                  <option value='pt'>Portugal</option>
-                  <option value='us'>United States</option>
-                  <option value='gb'>United Kingdom</option>
-                  <option value='au'>Australia</option>
-                  <option value='ao'>Angola</option>
-                  <option value='aq'>Antarctica</option>
-                  <option value='bq'>Burkina Faso</option>
-                  <option value='cn'>China</option>
+                  <optgroup label="europe">
+                    <option value='fr'>France</option>
+                    <option value='ar'>Argentina</option>
+                    <option value='pt'>Portugal</option>
+                    <option value='gb'>United Kingdom</option>
+                  </optgroup>
+                  <optgroup label="america">
+                    <option value='us'>United States</option>
+                    <option value='ca'>Canada</option>
+                  </optgroup>
+                  <optgroup label='asia'>
+                    <option value='cn'>China</option>
+                  </optgroup>
+                  <optgroup label='africa'>
+                    <option value='ao'>Angola</option>
+                    <option value='bq'>Burkina Faso</option>
+                  </optgroup>
                 </select>
               </form>
           </div>
diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js
index 9ab77de..556ea1a 100644
--- a/js/jquery.multi-select.js
+++ b/js/jquery.multi-select.js
@@ -20,8 +20,8 @@
           var container = $('<div id="ms-'+ms.attr('id')+'" class="ms-container"></div>'),
               selectableContainer = $('<div class="ms-selectable"></div>'),
               selectedContainer = $('<div class="ms-selection"></div>'),
-              selectableUl = $('<ul></ul>'),
-              selectedUl = $('<ul></ul>');
+              selectableUl = $('<ul class="ms-list"></ul>'),
+              selectedUl = $('<ul class="ms-list"></ul>');
           
           if (multiSelects.settings.emptyArray){
             if (ms.find("option[value='']").length == 0){
@@ -31,19 +31,32 @@
             }
           }
           ms.data('settings', multiSelects.settings);
-          ms.find("option:not(option[value=''])").each(function(){
-            var selectableLi = $('<li ms-value="'+$(this).val()+'">'+$(this).text()+'</li>');
+
+          var currentOptgroup = null;
+          ms.find('optgroup,option').each(function(){
+            if ($(this).is('optgroup')){
+              currentOptgroup = $(this).attr('label');
+              selectableUl.append($('<li class="ms-optgroup-container" id="ms-optgroup-'+
+                                  $(this).attr('label')+'"><ul class="ms-optroup"><li class="ms-optgroup-label">'+
+                                  $(this).attr('label')+'</li></ul></li>'));
+            }
+            if ($(this).is("option:not(option[value=''])")){
+              var selectableLi = $('<li class="ms-elem-selectable" ms-value="'+$(this).val()+'">'+$(this).text()+'</li>');
             
-            if ($(this).attr('title'))
-              selectableLi.attr('title', $(this).attr('title'));
-            if ($(this).attr('disabled') || ms.attr('disabled')){
-              selectableLi.attr('disabled', 'disabled');
-              selectableLi.addClass(multiSelects.settings.disabledClass)
+              if ($(this).attr('title'))
+                selectableLi.attr('title', $(this).attr('title'));
+              if ($(this).attr('disabled') || ms.attr('disabled')){
+                selectableLi.attr('disabled', 'disabled');
+                selectableLi.addClass(multiSelects.settings.disabledClass);
+              }
+              selectableLi.click(function(){
+                ms.multiSelect('select', $(this).attr('ms-value'));
+              });
+              console.log(selectableUl.children('#ms-optgroup-'+currentOptgroup+' ul'));
+              var container = currentOptgroup ? selectableUl.children('#ms-optgroup-'+currentOptgroup).find('ul').first() : selectableUl;
+              //console.log(container);
+              container.append(selectableLi);
             }
-            selectableLi.click(function(){
-              ms.multiSelect('select', $(this).attr('ms-value'));
-            });
-            selectableUl.append(selectableLi);
           });
           if (multiSelects.settings.selectableHeader){
             selectableContainer.append(multiSelects.settings.selectableHeader);
@@ -68,7 +81,7 @@
           text = selectedOption.text(),
           titleAttr = selectedOption.attr('title');
       
-        var selectedLi = $('<li ms-value="'+value+'">'+text+'</li>').detach(),
+        var selectedLi = $('<li class="ms-elem-selected" ms-value="'+value+'">'+text+'</li>').detach(),
             selectableUl = $('#ms-'+ms.attr('id')+' .ms-selectable ul'),
             selectedUl = $('#ms-'+ms.attr('id')+' .ms-selection ul'),
             selectableLi = selectableUl.children('li[ms-value="'+value+'"]'),