From 604d70bf2d21c59e360b3091351d9ab3a17d24c7 Mon Sep 17 00:00:00 2001
From: Hugo Bailey <hugo@mangopay.com>
Date: Mon, 11 Sep 2017 10:30:48 +0100
Subject: [PATCH] Add support for optgroups

---
 fancySelect.css | 10 ++++++++++
 fancySelect.js  | 19 ++++++++++++++-----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/fancySelect.css b/fancySelect.css
index 1d10993..d3a3dfc 100644
--- a/fancySelect.css
+++ b/fancySelect.css
@@ -143,4 +143,14 @@ div.fancy-select ul.options li.selected {
 
 div.fancy-select ul.options li.hover {
 	color: #fff;
+}
+
+div.fancy-select ul.options li.optgroup {
+	color: #8e8e8e;
+	cursor: default;
+	font-style: italic;
+}
+
+.fancy-select ul.options li.optchild {
+	padding-left: 30px;
 }
\ No newline at end of file
diff --git a/fancySelect.js b/fancySelect.js
index 4bd378a..52b9bbd 100644
--- a/fancySelect.js
+++ b/fancySelect.js
@@ -156,6 +156,9 @@
       options.on('mousedown.fs', 'li', function(e) {
         var clicked;
         clicked = $(this);
+        if (clicked.hasClass("optgroup")) {
+        	return false;
+        }
         sel.val(clicked.data('raw-value'));
         if (!isiOS) {
           sel.trigger('blur.fs').trigger('focus.fs');
@@ -181,19 +184,25 @@
         if (isiOS && !settings.forceiOS) {
           return;
         }
-        selOpts = sel.find('option');
-        return sel.find('option').each(function(i, opt) {
+        selOpts = sel.find('option, optgroup');
+        return sel.find('option, optgroup').each(function(i, opt) {
           var optHtml;
           opt = $(opt);
-          if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) {
+          if (opt.is("optgroup")) {
+          	return options.append("<li class=\"optgroup\" data-raw-value=\"\">" + opt.attr("label") + "</li>");
+          }else if (!opt.prop('disabled') && (opt.val() || settings.includeBlank)) {
             optHtml = settings.optionTemplate(opt);
+            var isChild = opt.parent().is("optgroup");
             if (opt.prop('selected')) {
-              return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected\">" + optHtml + "</li>");
+              return options.append("<li data-raw-value=\"" + (opt.val()) + "\" class=\"selected" + (isChild ? " optchild" : "") + "\">" + optHtml + "</li>");
             } else {
-              return options.append("<li data-raw-value=\"" + (opt.val()) + "\">" + optHtml + "</li>");
+              return options.append("<li data-raw-value=\"" + (opt.val()) + "\"" + (isChild ? " class=\"optchild\"" : "") + ">" + optHtml + "</li>");
             }
           }
         });
+        options.find(".optgroup").on("click", function(e){
+        	e.preventDefault();
+        });
       };
       sel.on('update.fs', function() {
         wrapper.find('.options').empty();