https://www.superiorschoolnc.com/wp-content/themes/wp-common-theme…/wds-select-replace.js?ver=2026-09-16-07-55

1/**
2 * Convert select dropdown to a list
3 */
4( function( $ ) {
5	$( document ).ready( function() {
6
7		window.WDSSelectDropdown = {};
8
9		( function( window, $, that ) {
10
11			// Constructor
12			that.init = function() {
13				that.cache();
14
15				if ( !that.meetsRequirements ) {
16					return;
17				}
18
19				that.bindEvents();
20				that.createDropdowns();
21
22			};
23
24			// Cache all the things
25			that.cache = function() {
26				that.$c = {
27					selectDropdown: $( 'select:not(.no-replace, .no-hide)' ),
28				};
29			};
30
31			// Do we meet the requirements?
32			that.meetsRequirements = function() {
33				return that.$c.selectDropdown.length > 0;
34			};
35
36			// Combine all events
37			that.bindEvents = function() {
38				$( 'body' ).on( 'click', '.dropdown-select li:not(.disabled)', that.setSelectedOption );
39			};
40
41			that.createDropdowns = function() {
42
43				// Loop through all of the select dropdowns and copy them
44				that.$c.selectDropdown.each( function( idx, select ) {
45					var $sel = $(select);
46
47					// Don't do this to dropdowns in Gravity Forms / Hubspot forms / Subscribe container
48					if ( $sel.closest( '.hbspt-form' ).length || $sel.closest( '.gform_wrapper' ).length || $sel.closest( '.subscribe-form-container' ).length ) {
49						return true; //continue with the next select
50					}
51
52					var $ctrl = $sel.parent('div');
53
54					// Copy the select
55					// Add a class to the new select
56					var $clone = $sel.clone().prop('multiple', true).appendTo($ctrl).addClass('select-clone');
57
58					// Maybe hide the original select
59					if (!$sel.hasClass('no-hide')) {
60						$sel.addClass('hidden');
61					}
62
63					// Convert the select to a UL
64					$clone.replaceWith(function () {
65						return $('<ul class="dropdown-menu dropdown-select select-clone" data-name="' + $(this).attr('id') + '" />').append($(this).contents());
66					});
67
68					$clone = $ctrl.find('.select-clone');
69
70					// Wrap this clone in a set of divs
71					$clone.wrapAll('<div class="dropdown"><div class="dropdown-container"><div class="dropdown-label"><div class="label-text">');
72
73					if ($ctrl.find('.dropdown-submit').length) {
74						$ctrl.find('.dropdown-label').append($ctrl.find('.dropdown-submit'));
75					}
76
77					if ($sel.find('option:selected')) {
78						$clone.before('<span>' + $sel.find('option:selected').text() + '</span>');
79					} else {
80						// Add the label before this clone
81						$clone.before('<span>' + $sel.find('option:first').text() + '</span>');
82					}
83
84					// Add a data attribute to each cloned option
85					$clone.find('option').each(function (i, opt) {
86						var $opt = $(opt);
87						var classAttr = '';
88						// Check for disabled fields
89						if ($opt.prop('disabled')) {
90							// Set disabled field with disabled class
91							$opt.replaceWith('<li class="disabled"><span class="select-text">' + $opt.text() + '</span></li>');
92						} else {
93							// Replace options with LIs
94							if ($opt.prop('selected')) {
95								classAttr = ' class="is-selected"';
96								$opt.next().prop('selected', false);
97							}
98
99							$opt.replaceWith('<li data-value="' + $opt.val() + '"' + classAttr + '><span class="select-text">' + $opt.text() + '</span></li>');
100						}
101					});
102				} );
103			};
104
105			// Set the selected option value to selected
106			// when the LI is clicked
107			that.setSelectedOption = function() {
108
109				// Remove selected from any other option
110				var $box = $( this ).closest( '.select-box' );
111				var $opt = $box.find( 'option[value="' + $( this ).data( 'value' ) + '"]' );
112
113
114				console.log(this, $box);
115
116				$box.find( 'option' ).not( $opt ).prop( 'selected', false );
117
118				// Set this clicked item to selected
119				$opt.prop( 'selected', true ).change();
120
121				// Change the value of the label
122				$box.find( '.label-text > span' ).text( $( this ).text() );
123
124				// Add a class to the parent once something is selected
125				$( this ).closest( '.select-box-wrapper' ).addClass( 'option-selected' );
126			};
127
128			// Engage
129			$( that.init );
130
131		})( window, $, window.WDSSelectDropdown );
132
133	} );
134} )( jQuery );