Multiselect polyfill by Usecue

  1<form id="multiselect-form">
  2
  3<label for="multiselect1">Multiselect 1</label>
  4<select id="multiselect1" name="multiselect1" multiple required>
  5    <option value="option1">Option 1</option>
  6    <option value="option2">Option 2</option>
  7    <option value="option3">Option 3</option>
  8    <option value="option4">Option 4</option>
  9</select>
 10
 11<br>
 12
 13<label for="multiselect2">Multiselect 2</label>
 14<select id="multiselect2" name="multiselect2" multiple required>
 15    <option value="option1">Option 1</option>
 16    <option value="option2">Option 2</option>
 17    <option value="option3">Option 3</option>
 18    <option value="option4">Option 4</option>
 19    <option value="option5">Option 5</option>
 20    <option value="option6">Option 6</option>
 21    <option value="option7">Option 7</option>
 22    <option value="option8">Option 8</option>
 23    <option value="option9">Option 9</option>
 24    <option value="option10">Option 10</option>
 25    <option value="option11">Option 11</option>
 26    <option value="option12">Option 12</option>
 27    <option value="option13">Option 13</option>
 28    <option value="option14">Option 14</option>
 29    <option value="option15">Option 15</option>
 30    <option value="option16">Option 16</option>
 31    <option value="option17">Option 17</option>
 32    <option value="option18">Option 18</option>
 33    <option value="option19">Option 19</option>
 34    <option value="option20">Option 20</option>
 35    <option value="option21">Option 21</option>
 36    <option value="option22">Option 22</option>
 37    <option value="option23">Option 23</option>
 38    <option value="option24">Option 24</option>
 39    <option value="option25">Option 25</option>
 40    <option value="option26">Option 26</option>
 41    <option value="option27">Option 27</option>
 42    <option value="option28">Option 28</option>
 43    <option value="option29">Option 29</option>
 44    <option value="option30">Option 30</option>
 45    <option value="option31">Option 31</option>
 46    <option value="option32">Option 32</option>
 47    <option value="option33">Option 33</option>
 48    <option value="option34">Option 34</option>
 49    <option value="option35">Option 35</option>
 50    <option value="option36">Option 36</option>
 51    <option value="option37">Option 37</option>
 52    <option value="option38">Option 38</option>
 53    <option value="option39">Option 39</option>
 54    <option value="option40">Option 40</option>
 55    <option value="option41">Option 41</option>
 56    <option value="option42">Option 42</option>
 57    <option value="option43">Option 43</option>
 58    <option value="option44">Option 44</option>
 59</select>
 60
 61<br>
 62
 63<label for="multiselect3">Multiselect 3</label>
 64<select name="multiselect3" id="multiselect3" multiple required>
 65  <optgroup label="Fruit">
 66    <option value="apple">Apples</option>
 67    <option value="banana">Bananas</option>
 68    <option value="cherry">Cherries</option>
 69    <option value="damson">Damsons</option>
 70  </optgroup>
 71  <hr />
 72  <optgroup label="Vegetables">
 73    <option value="artichoke">Artichokes</option>
 74    <option value="broccoli">Broccoli</option>
 75    <option value="cabbage">Cabbages</option>
 76  </optgroup>
 77  <hr />
 78  <optgroup label="Meat">
 79    <option value="beef">Beef</option>
 80    <option value="chicken">Chicken</option>
 81    <option value="pork">Pork</option>
 82  </optgroup>
 83  <hr />
 84  <optgroup label="Fish">
 85    <option value="cod">Cod</option>
 86    <option value="haddock">Haddock</option>
 87    <option value="salmon">Salmon</option>
 88    <option value="turbot">Turbot</option>
 89  </optgroup>
 90</select>
 91
 92<br>
 93
 94<label for="select1">Select 1</label>
 95<select id="select1" name="select1" required>
 96    <option></option>
 97    <option value="option1">Option 1</option>
 98    <option value="option2">Option 2</option>
 99    <option value="option3">Option 3</option>
100</select>
101
102<br>
103
104<button type="submit">Submit</button>
105
106</form>
107
108<script src="multiselect.js"></script>
109<link rel="stylesheet" href="multiselect.css" />
110
111<script>
112    /* FOR DEMO ONLY */
113    document.getElementById('multiselect-form').addEventListener('submit', event => {
114        event.preventDefault();
115        const formData = new FormData(event.target);
116        const entries = Array.from(formData.entries());
117        alert(entries.length? entries.map(([name, value]) => `${name}: ${value}`).join('\n') : 'Nothing submitted');
118    });
119    function toggleDebug() {
120        //the demo runs inside an iframe; toggle on the address bar the visitor actually sees
121        let win = window;
122        try {
123            if (window.top !== window) { void window.top.location.href; win = window.top; }
124        } catch (e) {
125            //cross-origin parent: fall back to toggling the iframe's own URL
126        }
127        const url = new URL(win.location);
128        if (url.searchParams.get('debug') === '1') {
129            url.searchParams.delete('debug');
130        } else {
131            url.searchParams.set('debug', '1');
132        }
133        win.location = url;
134    }
135</script>
136<a id="toggle-debug" onclick="toggleDebug()" href="#">Toggle debug mode</a>

 1body, select, input, button {font-size: 1rem; line-height: 1.4; font-family: sans-serif;}
 2
 3:root {
 4    --large-padding: 0.5em;
 5    --medium-padding: 0.25em;
 6    --small-padding: 0.15em;
 7    --tiny-padding: 0.05em;
 8    --max-width: 400px;
 9}
10
11form {max-width: var(--max-width);}
12label, select, fieldset {display: block;}
13label:not(:has(input)) {margin-bottom: var(--medium-padding);}
14select[multiple] + .fieldset {border: 1px solid; padding: var(--small-padding) 0;}
15select[multiple] + .fieldset label {padding: var(--tiny-padding) var(--medium-padding);}
16select[multiple] + .fieldset label input {display: inline-block; margin-right: var(--large-padding);}
17select[multiple] + .fieldset .multiselect-group {padding: var(--small-padding) var(--large-padding) var(--tiny-padding); font-weight: bold;}
18select[multiple] + .fieldset hr {border: none; border-top: 1px solid; margin: var(--large-padding) 0 var(--small-padding); opacity: 0.4;}
19.multiselect-native {position: relative;}
20.multiselect-native:not(.is-expanded) {border: 1px solid;}
21.multiselect-native:not(.is-expanded) output {display: flex; align-items: center;}
22.multiselect-native:not(.is-expanded) .fieldset,
23.multiselect-native.is-expanded output,
24.multiselect-native.is-expanded select {display: none;}
25.multiselect-native select {opacity: 0;}
26.multiselect-count {
27    position: absolute;
28    top: 1px;
29    left: 1px;
30    bottom: 1px;
31    right: 24px;
32    display: flex;
33    align-items: center;
34    padding: 0 var(--large-padding);
35    pointer-events: none;
36}
37input, select, option {padding: var(--small-padding) var(--large-padding);}
38select {
39    border: 1px solid;
40    padding-right: 24px;
41    width: 100%;
42    appearance: none;
43    -webkit-appearance: none;
44    -moz-appearance: none;
45    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 8px center;
46    background-size: 8px;
47    font-family: sans-serif;
48}
49select {
50    box-sizing: border-box;
51}
52select[multiple] option {
53    padding-top: 0;
54    padding-bottom: 0;
55}
56label:has(button) {
57    display: flex;
58    justify-content: space-between;
59    align-items: center;
60}
61.multiselect-toggle {
62    display: inline-block;
63    padding: 0;
64    width: 1em;
65    height: 1em;
66    line-height: 1;
67    border: none;
68    background: none;
69    cursor: pointer;
70    font-family: monospace;
71}

  1const maxHeight = '205px';
  2const useNativeOnMobile = true;
  3
  4const mediaQuery = window.matchMedia('(pointer: coarse)');
  5const hasDebug = search => new URLSearchParams(search).get('debug') === '1';
  6let debug = hasDebug(window.location.search);
  7try {
  8    if (!debug && window.top !== window) debug = hasDebug(window.top.location.search);
  9} catch (e) {}
 10document.querySelectorAll('select[multiple]').forEach(multiselect => {
 11    let override = null; //null = follow the media query, true = force checkboxes, false = force native select
 12    const fieldset = document.createElement('div');
 13    fieldset.className = 'fieldset';
 14    fieldset.style.maxHeight = maxHeight;
 15    fieldset.style.overflowY = 'auto';
 16    const checkboxes = [];
 17    const addCheckbox = option => {
 18        const label = document.createElement('label');
 19        const checkbox = document.createElement('input');
 20        checkbox.type = 'checkbox';
 21        checkbox.value = option.value;
 22        label.appendChild(checkbox);
 23        label.appendChild(document.createTextNode(option.textContent));
 24        fieldset.appendChild(label);
 25        checkboxes.push(checkbox);
 26    };
 27    Array.from(multiselect.children).forEach(child => {
 28        if (child.tagName === 'HR') {
 29            if (fieldset.lastElementChild && fieldset.lastElementChild.tagName !== 'HR') {
 30                fieldset.appendChild(document.createElement('hr'));
 31            }
 32        } else if (child.tagName === 'OPTGROUP') {
 33            const heading = document.createElement('div');
 34            heading.className = 'multiselect-group';
 35            heading.textContent = child.label;
 36            fieldset.appendChild(heading);
 37            Array.from(child.children).forEach(option => {
 38                if (option.tagName === 'OPTION' && option.value !== '') addCheckbox(option);
 39            });
 40        } else if (child.tagName === 'OPTION' && child.value !== '') {
 41            addCheckbox(child);
 42        }
 43    });
 44    const toggle = document.createElement('button');
 45    toggle.type = 'button';
 46    toggle.className = 'multiselect-toggle';
 47    const output = document.createElement('output');
 48    output.className = 'multiselect-count';
 49    const wrapper = document.createElement('div');
 50    wrapper.className = 'multiselect-native';
 51    multiselect.parentNode.insertBefore(wrapper, multiselect);
 52    wrapper.appendChild(multiselect);
 53    wrapper.appendChild(fieldset);
 54    wrapper.appendChild(output);
 55    const updateCount = () => {
 56        const count = Array.from(multiselect.selectedOptions).filter(option => option.value !== '').length;
 57        output.textContent = count + ' selected';
 58    };
 59    multiselect.addEventListener('change', updateCount);
 60    const label = document.querySelector('label[for="' + multiselect.id + '"]');
 61    if (label) {
 62        label.appendChild(document.createTextNode(' '));
 63        label.appendChild(toggle);
 64    } else {
 65        multiselect.parentNode.insertBefore(toggle, multiselect);
 66    }
 67    fieldset.addEventListener('change', () => {
 68        checkboxes.forEach(checkbox => {
 69            const option = Array.from(multiselect.options).find(option => option.value === checkbox.value);
 70            if (option) {
 71                option.selected = checkbox.checked;
 72            }
 73        });
 74        syncValidation();
 75        updateCount();
 76    });
 77    const isExpanded = () => override === null ? (!useNativeOnMobile || !mediaQuery.matches) : override;
 78    const wasRequired = multiselect.required;
 79    const syncValidation = () => {
 80        const expanded = isExpanded();
 81        const anyChecked = checkboxes.some(checkbox => checkbox.checked);
 82        multiselect.required = wasRequired && !expanded;
 83        if (checkboxes[0]) {
 84            checkboxes[0].required = wasRequired && expanded && !anyChecked;
 85        }
 86    };
 87    const applyLayout = () => {
 88        if (isExpanded()) {
 89            checkboxes.forEach(checkbox => {
 90                const option = Array.from(multiselect.options).find(option => option.value === checkbox.value);
 91                checkbox.checked = option ? option.selected : false;
 92            });
 93            fieldset.style.display = '';
 94            toggle.textContent = '-';
 95            toggle.style.display = debug ? '' : 'none';
 96            toggle.setAttribute('aria-expanded', 'true');
 97            wrapper.classList.add('is-expanded');
 98        } else {
 99            multiselect.style.display = '';
100            multiselect.setAttribute('size', '1');
101            toggle.textContent = '+';
102            toggle.setAttribute('aria-expanded', 'false');
103            wrapper.classList.remove('is-expanded');
104        }
105        syncValidation();
106        updateCount();
107    };
108    toggle.addEventListener('click', () => {
109        override = !isExpanded();
110        applyLayout();
111    });
112    applyLayout();
113    mediaQuery.addEventListener('change', () => {
114        if (override === null) applyLayout();
115    });
116});