https://globis.co.jp/wp-content/themes/salient-child/js/dropdown.js?ver=1.1.15.7

1(function ($) {
2  $.generateDropdown = function (selector, data = [], initOption, dropdownTitle = '') {
3    if (!selector) return;
4
5    /*create original select inside selector*/
6    const $selectContainer = $(selector);
7    const selectContent = data.length
8        ? `<p class="gb-dropdown-title">${dropdownTitle}</p><div class="custom-select"><select></select></div>`
9        : '<div class="custom-select"><select></select></div>';
10    $selectContainer
11      .empty()
12      .append(selectContent);
13    data.forEach(({ val, html, attrs = {} } = {}) => {
14      const $option = $("<option></option>").val(val).html(html);
15      if (initOption && val === initOption)
16        $option.attr("selected", "selected");
17      Object.keys(attrs).forEach((key) => $option.attr(key, attrs[key]));
18      $(`${selector} select`).append($option);
19    });
20
21    $selectWrapper = $(`${selector} .custom-select`);
22    const originalSelect = $($selectWrapper).children("select").first()[0];
23    const options = Array.from(originalSelect.options);
24    if (!options.length) return;
25
26    /* create a new DIV that will act as the selected item:*/
27    const selectedItem = document.createElement("DIV");
28    selectedItem.setAttribute("class", "select-selected");
29    selectedItem.innerHTML = options[originalSelect.selectedIndex].innerHTML;
30    $selectWrapper.append(selectedItem);
31
32    /*create a new DIV that will contain the option list:*/
33    const select = document.createElement("DIV");
34    select.setAttribute("class", "select-items select-hide");
35
36    /*for each option in the original select element */
37    options.forEach(({ innerHTML, value }, index) => {
38      /* create a new DIV that will act as an option item:*/
39      const option = document.createElement("DIV");
40      option.innerHTML = innerHTML;
41      const isSelected = initOption
42        ? parseInt(value) === initOption
43        : 0 === index;
44      if (isSelected) option.setAttribute("class", "same-as-selected");
45      option.addEventListener("click", function (e) {
46        /*when an item is clicked, update the original select box,
47        and the selected item:*/
48        options.forEach(({ innerHTML }, index) => {
49          if (innerHTML !== this.innerHTML) {
50            return;
51          }
52
53          originalSelect.selectedIndex = index;
54          $(originalSelect).change();
55          selectedItem.innerHTML = this.innerHTML;
56          $(select).children(".same-as-selected").removeClass();
57          this.setAttribute("class", "same-as-selected");
58        });
59        selectedItem.click();
60      });
61      select.appendChild(option);
62    });
63    $selectWrapper.append(select);
64    selectedItem.addEventListener("click", function (e) {
65      /*when the select box is clicked, close any other select boxes,
66      and open/close the current select box:*/
67      e.stopPropagation();
68      closeAllSelect(this);
69      this.nextSibling.classList.toggle("select-hide");
70      this.classList.toggle("select-arrow-active");
71    });
72    // }
73    function closeAllSelect(elmnt) {
74      /*a function that will close all select boxes in the document,
75      except the current select box:*/
76      var x,
77        y,
78        i,
79        xl,
80        yl,
81        arrNo = [];
82      x = document.getElementsByClassName("select-items");
83      y = document.getElementsByClassName("select-selected");
84      xl = x.length;
85      yl = y.length;
86      for (i = 0; i < yl; i++) {
87        if (elmnt == y[i]) {
88          arrNo.push(i);
89        } else {
90          y[i].classList.remove("select-arrow-active");
91        }
92      }
93      for (i = 0; i < xl; i++) {
94        if (arrNo.indexOf(i)) {
95          x[i].classList.add("select-hide");
96        }
97      }
98    }
99    /*if the user clicks anywhere outside the select box,
100    then close all select boxes:*/
101    document.addEventListener("click", closeAllSelect);
102  };
103})(jQuery);