Update to support optgroup tags

- options can now be nested inside optgroup tags
- removed js adding .hover class to li elements -- css :hover
pseudoclass is much cleaner

Author: jonwolfe

fancySelect.coffee

@@ -135,7 +135,7 @@ $.fn.fancySelect = (opts = {}) ->
 
     # Handle item selection, and
     # Add class selected to selected item
-    options.on 'click', 'li', (e) ->
+    options.on 'click', 'li.option', (e) ->
       sel.val($(this).data('value'))
 
       sel.trigger('blur').trigger('focus') unless isiOS
@@ -144,37 +144,32 @@ $.fn.fancySelect = (opts = {}) ->
       $(e.currentTarget).addClass 'selected'
       return sel.val($(this).data('value')).trigger('change').trigger('blur').trigger('focus')
 
-    # handle mouse selection
-    options.on 'mouseenter', 'li', ->
-      nowHovered = $(this)
-      hovered = options.find('.hover')
-      hovered.removeClass 'hover'
-
-      nowHovered.addClass 'hover'
-
-    options.on 'mouseleave', 'li', ->
-      options.find('.hover').removeClass('hover')
-
     copyOptionsToList = ->
       # update our trigger to reflect the select (it really already should, this is just a safety)
       updateTriggerText()
 
       return if isiOS && !settings.forceiOS
 
-      # snag current options before we add a default one
-      selOpts = sel.find 'option'
-
-      # generate list of options for the fancySelect
-
-      sel.find('option').each (i, opt) ->
+      sel.children().each (i, opt) ->
         opt = $(opt)
+        if opt.is('option')
+          createLiFromOption opt, options
+        else if opt.is('optgroup')
+          optgroup = opt
+          options.append "<li class='optgroup'><span class='optgroup-label'>#{optgroup.prop 'label'}</span><ul id=optgroup_#{i}>"
+          ul = $("#optgroup_#{i}")
+          optgroup.children().each (i, nested_opt) ->
+            nested_opt = $(nested_opt)
+            createLiFromOption nested_opt, ul
+
+    createLiFromOption = (opt, parent) ->
+      if !opt.prop('disabled') && (opt.val() || settings.includeBlank)
+        # Is there a select option on page load?
+        if opt.prop('selected')
+          parent.append "<li data-value='#{opt.val()}' class='option selected'>#{opt.text()}</li>"
+        else
+          parent.append "<li data-value='#{opt.val()}' class='option'>#{opt.text()}</li>"
 
-        if !opt.prop('disabled') && (opt.val() || settings.includeBlank)
-          # Is there a select option on page load?
-          if opt.prop('selected')
-            options.append "<li data-value=\"#{opt.val()}\" class=\"selected\">#{opt.text()}</li>"
-          else
-            options.append "<li data-value=\"#{opt.val()}\">#{opt.text()}</li>"
 
     # for updating the list of options after initialization
     sel.on 'update', ->

fancySelect.css

@@ -136,11 +136,33 @@ div.fancy-select ul.options li {
 	-o-transition: all 150ms ease-out;
 }
 
+div.fancy-select ul.options li.option {
+	padding: 8px 12px;
+}
+
+div.fancy-select ul.options span.optgroup-label {
+	display: block;
+	padding: 8px 12px;
+	font-style: italic;
+	color: #323d42;
+}
+
+div.fancy-select ul.options li.optgroup {
+	padding: 0;
+}
+div.fancy-select ul.options li.optgroup ul {
+	padding: 0;
+}
+div.fancy-select ul.options li.optgroup li {
+	padding: 8px 12px 8px 24px;
+}
+
 div.fancy-select ul.options li.selected {
 	background: rgba(43,134,134,0.3);
 	color: rgba(255,255,255,0.75);
 }
 
-div.fancy-select ul.options li.hover {
+div.fancy-select ul.options li.option:hover {
 	color: #fff;
+	background: rgba(43,134,134,0.2);
 }

fancySelect.js

@@ -47,7 +47,7 @@
 		<script src="fancySelect.js"></script>
 		<script>
 			$(document).ready(function() {
-				$('#basic-usage-demo').fancySelect();
+				$('#basic-usage-demo').fancySelect({includeBlank:true});
 
 				// Boilerplate
 				var repoName = 'fancyselect'
@@ -141,12 +141,16 @@ <h1>FancySelect</h1>
 		<div id="main">
 			<section id="basic-usage">
 				<select id="basic-usage-demo">
-					<option value="">Pick Something…</option>
-					<option>Lorem Ipsum</option>
-					<option>Dolor Sit</option>
-					<option>Vehicula Ornare</option>
-					<option>Foo</option>
-					<option>Bar</option>
+					<option value>Pick Something…</option>
+					<optgroup label="group 1">
+						<option>Lorem Ipsum</option>
+						<option>Dolor Sit</option>
+						<option>Vehicula Ornare</option>
+					</optgroup>
+					<optgroup label="group 2">
+						<option>Foo</option>
+						<option>Bar</option>
+					</optgroup>
 					<option>Baz</option>
 					<option>Qux</option>
 					<option>Zoobie</option>