Allow dropdowns for select box.

app/assets/javascripts/bootstrap_select_dropdown.js

@@ -0,0 +1,53 @@
+$(function (){
+    // for some strange reason selectpicker prevents the click-event. so just use mouseup
+    // when clicking on an optgroup "label", toggle it's "children"
+    $(document).on("mouseup", ".bootstrap-select .dropdown-header", function (){
+        var $optgroup = $(this),
+            $ul = $optgroup.closest("ul"),
+            optgroup = $optgroup.data("optgroup"),
+
+            // options that belong to this optgroup
+            $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+        // show/hide options
+        if($optgroup.hasClass("closed")) {
+          $options.show();
+        } else {
+          $options.hide();
+        }
+
+        $optgroup.toggleClass("closed");
+    });
+
+    // initially close all optgroups that have the class "closed"
+    $(document).on("loaded.bs.select", function (){
+        $(this).find(".dropdown-header.closed").each(function (){
+            var $optgroup = $(this),
+                $ul = $optgroup.closest("ul"),
+                optgroup = $optgroup.data("optgroup"),
+
+                // options that belong to this optgroup
+                $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+            // show/hide options
+            $options.hide();
+        });
+    });
+    $(document).on("changed.bs.select", function(){
+      $(this).find(".dropdown-header.closed").each(function(){
+        var $optgroup = $(this),
+            $ul = $optgroup.closest("ul"),
+            optgroup = $optgroup.data("optgroup"),
+
+            // options that belong to this optgroup
+            $options = $ul.find("[data-optgroup="+optgroup+"]").not(".selected").not($optgroup);
+
+        // show/hide options
+        if($optgroup.hasClass("closed")) {
+          $options.hide();
+        } else {
+          $options.show();
+        }
+      })
+    });
+});

app/assets/javascripts/plum_boot.es6

@@ -19,6 +19,7 @@ export default class Initializer {
   }
 
   initialize_bootstrap_select() {
+    $("optgroup").addClass("closed")
     $("select[multiple='multiple']").selectpicker({})
     $(".datatable").DataTable()
   }

app/assets/stylesheets/application.css.scss

@@ -57,3 +57,4 @@
 @import 'components/tabs';
 @import 'components/welcome_page';
 @import 'components/catalog';
+@import 'components/select_box';

app/assets/stylesheets/components/select_box.scss

@@ -0,0 +1,3 @@
+.bootstrap-select .dropdown-header {
+  cursor: pointer;
+}