https://bier-guide.net/themes/custom/bp_guides/js/nice-select-optgroup.js?tm6hfe

1/*  jQuery Nice Select - v1.1.0
2    https://github.com/hernansartorio/jquery-nice-select
3    Made by Hernán Sartorio  */
4 
5(function($) {
6
7  $.fn.niceSelect = function(method) {
8
9    // Methods
10    if (typeof method == 'string') {      
11      if (method == 'update') {
12        this.each(function() {
13          var $select = $(this);
14          var $dropdown = $(this).next('.nice-select');
15          var open = $dropdown.hasClass('open');
16          
17          if ($dropdown.length) {
18            $dropdown.remove();
19            create_nice_select($select);
20            
21            if (open) {
22              $select.next().trigger('click');
23            }
24          }
25        });
26      } else if (method == 'destroy') {
27        this.each(function() {
28          var $select = $(this);
29          var $dropdown = $(this).next('.nice-select');
30          
31          if ($dropdown.length) {
32            $dropdown.remove();
33            $select.css('display', '');
34          }
35        });
36        if ($('.nice-select').length == 0) {
37          $(document).off('.nice_select');
38        }
39      } else {
40        console.log('Method "' + method + '" does not exist.')
41      }
42      return this;
43    }
44      
45    // Hide native select
46    this.hide();
47
48    // Create custom markup
49    this.each(function() {
50      var $select = $(this);
51      
52      if (!$select.next().hasClass('nice-select')) {
53        create_nice_select($select);
54      }
55    });
56
57    function create_nice_select($select) {
58      $select.after($('<div></div>')
59        .addClass('nice-select')
60        .addClass($select.attr('class') || '')
61        .addClass($select.attr('disabled') ? 'disabled' : '')
62        .attr('tabindex', $select.attr('disabled') ? null : '0')
63        .html('<span class="current"></span><ul class="list"></ul>')
64      );
65      
66      var $dropdown = $select.next();
67      var $options = $select.find('option');
68      var $optgroups = $select.find('optgroup');
69      var $selected = $select.find('option:selected');
70      
71      $dropdown.find('.current').html($selected.data('display') || $selected.text());
72      
73      $options.each(function(i) {
74        var $option = $(this);
75        var display = $option.data('display');
76        var group = $option.parents('optgroup').data('i');
77
78        $dropdown.find('ul').append($('<li></li>')
79          .attr('data-value', $option.val())
80          .attr('data-display', (display || null))
81          .attr('data-group', (group || null))
82          .addClass('option' +
83            ($option.is(':selected') ? ' selected' : '') +
84            ($option.is(':disabled') ? ' disabled' : ''))
85          .html($option.text())
86        );
87        
88      });
89      $optgroups.each(function(i, g) {
90        label = $(g).attr('label')
91        $dropdown.find('ul li').filter(function() {
92          return $(this).data('group') == $(g).data('i')
93        })
94        .wrapAll('<div class="optgroup"/>')
95        .parent()
96        .prepend('<span class="label">' + label + '</span>')
97      });
98    }
99    
100    /* Event listeners */
101    
102    // Unbind existing events in case that the plugin has been initialized before
103    $(document).off('.nice_select');
104    
105    // Open/close
106    $(document).on('click.nice_select', '.nice-select', function(event) {
107      var $dropdown = $(this);
108      
109      $('.nice-select').not($dropdown).removeClass('open');
110      $dropdown.toggleClass('open');
111      
112      if ($dropdown.hasClass('open')) {
113        $dropdown.find('.option');  
114        $dropdown.find('.focus').removeClass('focus');
115        $dropdown.find('.selected').addClass('focus');
116      } else {
117        $dropdown.focus();
118      }
119    });
120    
121    // Close when clicking outside
122    $(document).on('click.nice_select', function(event) {
123      if ($(event.target).closest('.nice-select').length === 0) {
124        $('.nice-select').removeClass('open').find('.option');  
125      }
126    });
127    
128    // Option click
129    $(document).on('click.nice_select', '.nice-select .option:not(.disabled)', function(event) {
130      var $option = $(this);
131      var $dropdown = $option.closest('.nice-select');
132      
133      $dropdown.find('.selected').removeClass('selected');
134      $option.addClass('selected');
135      
136      var text = $option.data('display') || $option.text();
137      $dropdown.find('.current').text(text);
138      
139      $dropdown.prev('select').val($option.data('value')).trigger('change');
140    });
141
142    // Keyboard events
143    $(document).on('keydown.nice_select', '.nice-select', function(event) {    
144      var $dropdown = $(this);

145      var $focused_option = $($dropdown.find('.focus') || $dropdown.find('.list .option.selected'));
146      
147      // Space or Enter
148      if (event.keyCode == 32 || event.keyCode == 13) {
149        if ($dropdown.hasClass('open')) {
150          $focused_option.trigger('click');
151        } else {
152          $dropdown.trigger('click');
153        }
154        return false;
155      // Down
156      } else if (event.keyCode == 40) {
157        if (!$dropdown.hasClass('open')) {
158          $dropdown.trigger('click');
159        } else {
160          var $next = $focused_option.nextAll('.option:not(.disabled)').first();
161          if ($next.length > 0) {
162            $dropdown.find('.focus').removeClass('focus');
163            $next.addClass('focus');
164          }
165        }
166        return false;
167      // Up
168      } else if (event.keyCode == 38) {
169        if (!$dropdown.hasClass('open')) {
170          $dropdown.trigger('click');
171        } else {
172          var $prev = $focused_option.prevAll('.option:not(.disabled)').first();
173          if ($prev.length > 0) {
174            $dropdown.find('.focus').removeClass('focus');
175            $prev.addClass('focus');
176          }
177        }
178        return false;
179      // Esc
180      } else if (event.keyCode == 27) {
181        if ($dropdown.hasClass('open')) {
182          $dropdown.trigger('click');
183        }
184      // Tab
185      } else if (event.keyCode == 9) {
186        if ($dropdown.hasClass('open')) {
187          return false;
188        }
189      }
190    });
191
192    // Detect CSS pointer-events support, for IE <= 10. From Modernizr.
193    var style = document.createElement('a').style;
194    style.cssText = 'pointer-events:auto';
195    if (style.pointerEvents !== 'auto') {
196      $('html').addClass('no-csspointerevents');
197    }
198
199    return this;
200
201  };
202
203}(jQuery));