https://www.uitzendbureau.nl/js/lib/jquery_custom_selectbox.js

1// Attach an event listener to the document to catch every 'change' event on a
2// radius selector. Attaching this to the document makes it easy to add new radius
3// selectors to the page without having to attach the event handlers again
4document.addEventListener('click', function(e) {
5  const clickedElement = e.target;
6
7  // Check if the clicked element is an anchor tag within a .radius-selector div
8  if (clickedElement.tagName === 'A' && clickedElement.closest('.radius-selector div')) {
9    e.preventDefault();
10
11    let value, displayValue;
12
13    const parentElement = clickedElement.closest('.radius-selector');
14
15    // If the element has a data-attribute called 'value', we use that value as radius-value
16    if (clickedElement.dataset.value) {
17      value = clickedElement.dataset.value;
18      displayValue = clickedElement.textContent;
19    } else {
20      value = clickedElement.textContent;
21      displayValue = value;
22      if (!isNaN(parseInt(value))) {
23        value = parseInt(value);
24        displayValue = value + 'km';
25      }
26    }
27
28    parentElement.querySelector('.distance').textContent = displayValue;
29    const radiusValueInput = parentElement.querySelector('.radius-value');
30    radiusValueInput.value = value;
31    radiusValueInput.dispatchEvent(new Event('change'));
32  }
33});