https://www.clinicasdentalescaser.es/custom-select.js?nocache=1789123183

1var x, i, j, l, ll, selElmnt, a, b, c
2x = document.getElementsByClassName('custom-select')
3l = x.length
4
5let currentState = -1
6let currentClinic = -1
7
8for (i = 0; i < l; i++) {
9  selElmnt = x[i].getElementsByTagName('select')[0]
10  ll = selElmnt.length
11  a = document.createElement('DIV')
12  a.setAttribute('class', 'select-selected')
13  a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML
14  x[i].appendChild(a)
15  b = document.createElement('DIV')
16  b.setAttribute('class', 'select-items select-hide')
17  for (j = 1; j < ll; j++) {
18    c = document.createElement('DIV')
19
20    if (selElmnt.options[j].innerHTML.includes('·')) {
21      let innerText
22      innerText = selElmnt.options[j].innerHTML.split('·')
23      c.innerHTML = `<span>${innerText[0]}</span><span>${innerText[1]}</span>`
24    } else c.innerHTML = selElmnt.options[j].innerHTML
25
26    c.setAttribute('value', selElmnt.options[j].value)
27
28    if (selElmnt.options[j].getAttribute('state')) {
29      c.setAttribute('state', selElmnt.options[j].getAttribute('state'))
30    }
31
32    c.addEventListener('click', function (e) {
33      const mapInfo = document.querySelector('#map-info')
34      if (mapInfo) {
35        mapInfo.classList.remove('visible')
36      }
37      resetMapPosition()
38      var y, i, k, s, h, sl, yl
39      s = this.parentNode.parentNode.getElementsByTagName('select')[0]
40      sl = s.length
41      h = this.parentNode.previousSibling
42      for (i = 0; i < sl; i++) {
43        if (
44          s.options[i].innerHTML
45            .replace(/<\/?span[^>]*>/g, '')
46            .replace('·', '') ==
47          this.innerHTML.replace(/<\/?span[^>]*>/g, '').replace('·', '')
48        ) {
49          s.selectedIndex = i
50          h.innerHTML = this.innerHTML
51          h.setAttribute('value', this.getAttribute('value'))
52          y = this.parentNode.getElementsByClassName('same-as-selected')
53          yl = y.length
54          for (k = 0; k < yl; k++) {
55            y[k].removeAttribute('class')
56          }
57          this.setAttribute('class', 'same-as-selected')
58          break
59        }
60      }
61      h.click()
62    })
63    b.appendChild(c)
64  }
65  x[i].appendChild(b)
66  a.addEventListener('click', function (e) {
67    if (
68      e.target.parentNode.parentNode.parentNode.parentNode.classList.contains(
69        'container'
70      ) &&
71      e.target.innerHTML != 'Escoge tu clínica más cercana'
72    ) {
73      let parent = e.target.parentNode.parentNode.parentNode
74      parent.querySelector('.name').style.display = 'block'
75      parent.querySelector('[name="nombre"]').setAttribute('required', true)
76      parent.querySelector('.phone').style.display = 'block'
77      parent.querySelector('[name="telefono"]').setAttribute('required', true)
78      parent.querySelector('.email').style.display = 'block'
79      parent.querySelector('[name="email"]').setAttribute('required', true)
80    }
81
82    e.stopPropagation()
83    closeAllSelect(this)
84    this.nextSibling.classList.toggle('select-hide')
85    this.classList.toggle('select-arrow-active')
86
87    if (
88      e.target.parentNode.querySelector('select').id === 'map-block-province'
89    ) {
90      if (e.target.getAttribute('value') != null) {
91        let tmpState = currentState
92
93        currentState = removeAccents(
94          e.target.getAttribute('value').toLowerCase()
95        ).trim()
96
97        if (currentState == 'madrid') {
98          document
99            .querySelector('#map-clinic-name + svg')
100            .classList.add('madrid')
101        } else {
102          document
103            .querySelector('#map-clinic-name + svg')
104            .classList.remove('madrid')
105        }
106
107        if (tmpState != currentState) {
108          const tmpElement = document.querySelector(
109            '.clinics-div > .select-selected'
110          )
111
112          tmpElement.innerHTML = 'Selecciona una clínica'
113          tmpElement.removeAttribute('value')
114        }
115
116        const clinics = document.querySelectorAll(
117          '.clinics-div > .select-items > div'
118        )
119
120        clinics.forEach((item) => {
121          item.style.display = 'block'
122        })
123
124        clinics.forEach((item) => {
125          if (currentState != 'todas') {
126            if (item.getAttribute('state') != currentState)
127              item.style.display = 'none'
128          } else {
129            currentState = 'todas'
130            item.style.display = 'block'
131          }
132        })
133
134        if (currentState != 'todas') {
135          selectValue = -1

136          clinicsMarkers.forEach((clinic) => {
137            if (clinic._groups[0][0].getAttribute('prov') != currentState) {
138              clinic._groups[0][0].style.display = 'none'
139            } else {
140              clinic._groups[0][0].style.display = 'initial'
141            }
142          })
143        } else {
144          clinicsMarkers.forEach((clinic) => {
145            clinic._groups[0][0].style.display = 'initial'
146          })
147        }
148      }
149    }
150
151    if (e.target.parentNode.querySelector('select').id === 'map-block-clinic') {
152      const selectValue = +e.target.getAttribute('value')
153
154      if (selectValue != 0) {
155        clinicsMarkers.forEach((clinic) => {
156          if (clinic._groups[0][0].getAttribute('id') != selectValue) {
157            clinic._groups[0][0].style.display = 'none'
158          } else {
159            clinic._groups[0][0].style.display = 'initial'
160            showClinicInfo(clinic.attr('id'))
161          }
162        })
163      } else {
164        if (currentState === 'todas')
165          clinicsMarkers.forEach((clinic) => {
166            clinic._groups[0][0].style.display = 'initial'
167          })
168      }
169    }
170  })
171}
172
173function closeAllSelect(elmnt) {
174  var x,
175    y,
176    i,
177    xl,
178    yl,
179    arrNo = []
180  x = document.getElementsByClassName('select-items')
181  y = document.getElementsByClassName('select-selected')
182  xl = x.length
183  yl = y.length
184  for (i = 0; i < yl; i++) {
185    if (elmnt == y[i]) {
186      arrNo.push(i)
187    } else {
188      y[i].classList.remove('select-arrow-active')
189    }
190  }
191  for (i = 0; i < xl; i++) {
192    if (arrNo.indexOf(i)) {
193      x[i].classList.add('select-hide')
194    }
195  }
196}
197
198document.addEventListener('click', closeAllSelect)