https://www.slowfood.de/++resource++slwf.website/js/select.js?v=3.25.0

1$(document).ready(function () {
2    $('select').each(function () {
3        let $this = $(this), numberOfOptions = $(this).children('option').length;
4        let isReadonly = $this.hasClass('readonly');
5
6        $this.addClass('select-hidden');
7        $this.wrap('<div class="select"></div>');
8        if (isReadonly) {
9            $this.after('<div class="select-styled"></div>');
10        }
11        else {
12            $this.after(`<div class="select-styled"><input type="text" placeholder="${$this.attr('placeholder')}"></div>`);
13        }
14
15        let $styledSelect = $this.next('.select-styled');
16
17        let $list = $('<ul />', {
18            'class': 'select-options'
19        }).insertAfter($styledSelect);
20
21        for (let i = 0; i < numberOfOptions; i++) {
22            $('<li />', {
23                text: $this.children('option').eq(i).text(),
24                rel: $this.children('option').eq(i).val()
25            }).appendTo($list);
26        }
27
28        let $listItems = $list.children('li');
29
30        $styledSelect.click(function (e) {
31            e.stopPropagation();
32            $('.select-styled.active').not(this).each(function () {
33                $(this).removeClass('active').next('ul.select-options').hide();
34            });
35            $(this).toggleClass('active').next('ul.select-options').toggle();
36        });
37
38        $listItems.click(function (e) {
39            e.stopPropagation();
40            if (isReadonly) {
41                $styledSelect.text($(this).text()).removeClass('active');
42            }
43            else {
44                $styledSelect.children('input').val($(this).text()).removeClass('active');
45            }
46            $this.val($(this).attr('rel'));
47            $list.hide();
48        });
49
50        if (isReadonly) {
51            let value = $this.attr('value');
52            if (!value) {
53                $listItems.get(0).click();
54            }
55            else {
56                $listItems.each(function () {
57                    if ($(this).attr('rel') === value) {
58                        $(this).click();
59                    }
60                });
61            }
62        }
63
64        $(document).click(function () {
65            $styledSelect.removeClass('active');
66            $list.hide();
67        });
68    });
69});