https://portal.vfp.de/view/core/script/SewobeMultiselector.js?v=ec97d0a398c47638d0b9dc50bb43d0fd

1const multiselects = document.querySelectorAll('.multi-select');
2
3let activeAutoClose = null;
4
5multiselects.forEach((select) => {
6    const hidden = select.querySelector('input[type="hidden"]');
7    const list = select.querySelector('ul');
8    const items = select.querySelectorAll('li');
9    const overlay = select.querySelector('.overlay');
10    const autoClose = select.classList.contains('auto-close');
11
12    let toggleList = (ele) => {
13        if (ele.classList.contains('overlay')) {
14            if (list.classList.contains('open')) {
15                // Close overlay
16                list.classList.remove('open');
17                if (autoClose && activeAutoClose === list) {
18                    activeAutoClose = null;
19                }
20            } else {
21                // Open overlay
22                list.classList.add('open');
23                if (autoClose) {
24                    activeAutoClose = list;
25                }
26            }
27        }
28    }
29    let changeValue = (id, modus) => {
30        // Werte holen
31        let values = hidden.value;
32        // Aufbereiten
33        if (values !== "") {
34            values = values.split(',');
35        } else {
36            values = [];
37        }
38        let index = values.indexOf(id);
39        // Wenn schon existiert, löschen
40        switch (modus) {
41            case 1: // Schreiben
42                if (index < 0) {
43                    values.push(id);
44                }
45                break;
46            case 2: // Löschen
47                if (index >= 0) {
48                    values.splice(index, 1);
49                }
50                break;
51        }
52        values = values.toString();
53        // Werte wegschreiben
54        hidden.value = values;
55    }
56    let removeItem = (ele) => {
57        if (ele.classList.contains('item')) {
58            ele = ele.querySelector('.remove');
59        }
60        if (ele.classList.contains('label')) {
61            ele = ele.nextSibling;
62        }
63        while (!ele.classList.contains('remove')) {
64            ele = ele.parentElement;
65        }
66        // Hiddenwert anpassen
67        let id = ele.dataset.id;
68        changeValue(id, 2);
69        // Item löschen
70        ele.parentElement.remove();
71        let entry = list.querySelector('[id="' + id + '"]');
72        entry.removeAttribute('disabled');
73    }
74    overlay.addEventListener("click", (e) => {
75        toggleList(e.target);
76        if (autoClose && activeAutoClose) {
77            e.stopPropagation();
78        }
79    });
80    const overlayitems = overlay.querySelectorAll('.item .remove');
81    for (let overlayitem of overlayitems) {
82        overlayitem.addEventListener('click', (e) => {
83            removeItem(e.target);
84            if (autoClose && activeAutoClose) {
85                e.stopPropagation();
86            }
87        });
88    }
89    let addItem = (ele) => {
90        let disabled = ele.getAttribute('disabled');
91        if (disabled === null) {
92            // Holen von ID
93            let id = ele.id;
94            // Holen von Label
95            let label = ele.dataset.label;
96            // Bauen von Tag
97            let tag = document.createElement('div');
98            tag.classList.add('item');
99            let spanlabel = document.createElement('span');
100            spanlabel.classList.add('label');
101            spanlabel.innerText = label;
102            let spanclose = document.createElement('span');
103            spanclose.innerHTML = '<i class="far fa-times"></i>';
104            spanclose.classList.add('remove');
105            spanclose.dataset.id = id;
106            spanclose.addEventListener('click', (e) => {
107                removeItem(e.target);
108                if (autoClose && activeAutoClose) {
109                    e.stopPropagation();
110                }
111            });
112            tag.addEventListener('click', (e) => {
113                removeItem(e.target);
114                if (autoClose && activeAutoClose) {
115                    e.stopPropagation();
116                }
117            });
118            tag.appendChild(spanlabel);
119            tag.appendChild(spanclose);
120            overlay.prepend(tag);
121            // Disablen von Item
122            ele.setAttribute('disabled', 'disabled');
123            // Hiddenwert anpassen
124            changeValue(id, 1);
125        }
126    }
127    for (let item of items) {
128        item.addEventListener('click', (e) => {
129            addItem(e.target);
130            if (autoClose && activeAutoClose) {
131                e.stopPropagation();
132            }
133        });
134    }
135});
136
137document.addEventListener("click", function (e) {
138    if (activeAutoClose) {
139        activeAutoClose.classList.remove('open');
140        activeAutoClose = null;
141        e.stopPropagation();
142    }
143});