<div class="org-choices-block">
<div class="vebego-container">
<div class="choices-container">
<label class="atm-form-label form-label " for="">Ik zoek een baan als</label>
<div class="atm-form-select--choices " data-custom-select>
<!-- Hidden native select for form submission -->
<select class="form-select-native" id="select" name="select" style="display: none;">
<option value="1" selected>Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
</select>
<!-- Custom select UI -->
<div class="custom-select-wrapper">
<button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false">
<span class="custom-select-value">Option One</span>
<span class="custom-select-arrow">
<i class="fal fa-chevron-down"></i>
</span>
</button>
<ul class="custom-select-dropdown" role="listbox">
<li class="custom-select-option selected" role="option" data-value="1" aria-selected="true">
Option One
</li>
<li class="custom-select-option " role="option" data-value="2">
Option Two
</li>
<li class="custom-select-option " role="option" data-value="3">
Option Three
</li>
</ul>
</div>
</div>
</div>
<a class="atm-button atm-button-primary button-md no-icon ">
<div class="button-content-wrapper">
<span class="button-content">
<span>Button</span>
<i class="atm-icon fal fa-arrow-right "></i>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
<div class="org-choices-block">
<div class="vebego-container">
<div class="choices-container">
{{ render "@label" label merge=true }}
{{ render "@select--choices" merge=true }}
</div>
{{ render "@button-primary" merge=true }}
</div>
</div>
{
"label": {
"text": "Ik zoek een baan als",
"tag": "h1"
}
}
.org-choices-block {
@apply text-center;
.form-label {
@apply text-black font-normal text-h5 md:text-h1 font-display;
}
.choices-container {
@apply flex justify-center gap-3 mb-4 flex-wrap;
}
}
(function () {
'use strict';
document.addEventListener('DOMContentLoaded', function () {
const choicesBlock = document.querySelector('.org-choices-block');
if (!choicesBlock) return;
// Get choices data from data attribute
const allOptions = JSON.parse(choicesBlock.dataset.choices || '{}');
// DOM elements - get the hidden native selects
const mainChoiceDropdown = document.getElementById('mainChoice');
const subChoiceDropdown = document.getElementById('subChoice');
const submitBtn = document.getElementById('submitBtn');
// Get the custom select containers
const mainChoiceContainer = mainChoiceDropdown?.closest(
'[data-custom-select]'
);
const subChoiceContainer = subChoiceDropdown?.closest(
'[data-custom-select]'
);
// Get custom UI elements for subchoice
const subChoiceCustomDropdown = subChoiceContainer?.querySelector(
'.custom-select-dropdown'
);
const subChoiceCustomTrigger = subChoiceContainer?.querySelector(
'.custom-select-value'
);
if (!mainChoiceDropdown || !subChoiceDropdown || !subChoiceContainer) {
console.error('Required elements not found');
return;
}
// Hide submit button and disable subchoice initially
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.style.display = 'none';
}
if (subChoiceDropdown) {
subChoiceDropdown.disabled = true;
}
if (subChoiceContainer) {
subChoiceContainer.classList.add('disabled');
const trigger = subChoiceContainer.querySelector(
'.custom-select-trigger'
);
if (trigger) {
trigger.style.pointerEvents = 'none';
trigger.style.opacity = '0.5';
}
}
// Function to update custom select UI
function updateCustomSelectUI(
nativeSelect,
customDropdown,
customTrigger,
options,
placeholder
) {
// Update native select
nativeSelect.innerHTML = `<option value="">${placeholder}</option>`;
options.forEach(function (link) {
const option = document.createElement('option');
option.value = link.Url;
option.text = link.Name;
nativeSelect.appendChild(option);
});
// Update custom dropdown UI
if (customDropdown) {
customDropdown.innerHTML = '';
options.forEach(function (link) {
const li = document.createElement('li');
li.className = 'custom-select-option';
li.setAttribute('role', 'option');
li.setAttribute('data-value', link.Url);
li.setAttribute('tabindex', '0');
li.textContent = link.Name;
customDropdown.appendChild(li);
});
}
// Reset trigger text to placeholder
if (customTrigger) {
customTrigger.textContent = placeholder;
}
// Reset native select value
nativeSelect.value = '';
}
// On mainChoice change, populate subChoice
mainChoiceDropdown.addEventListener('change', function () {
const selectedMainChoice = this.value;
const subChoiceOptions = allOptions[selectedMainChoice] || [];
// Enable or disable subchoice based on main choice selection
if (selectedMainChoice) {
// Enable subchoice
if (subChoiceDropdown) {
subChoiceDropdown.disabled = false;
}
if (subChoiceContainer) {
subChoiceContainer.classList.remove('disabled');
const trigger = subChoiceContainer.querySelector(
'.custom-select-trigger'
);
if (trigger) {
trigger.style.pointerEvents = '';
trigger.style.opacity = '';
}
}
} else {
// Disable subchoice
if (subChoiceDropdown) {
subChoiceDropdown.disabled = true;
}
if (subChoiceContainer) {
subChoiceContainer.classList.add('disabled');
const trigger = subChoiceContainer.querySelector(
'.custom-select-trigger'
);
if (trigger) {
trigger.style.pointerEvents = 'none';
trigger.style.opacity = '0.5';
}
}
}
// Update both native and custom UI
updateCustomSelectUI(
subChoiceDropdown,
subChoiceCustomDropdown,
subChoiceCustomTrigger,
subChoiceOptions,
'kies een sector'
);
// Hide submit button until subchoice is selected
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.style.display = 'none';
}
});
// Show and enable submit button when subchoice is selected
subChoiceDropdown.addEventListener('change', function () {
if (submitBtn && this.value) {
submitBtn.disabled = false;
submitBtn.style.display = '';
}
});
// Handle custom dropdown clicks using event delegation
if (subChoiceCustomDropdown) {
subChoiceCustomDropdown.addEventListener('click', function (e) {
const option = e.target.closest('.custom-select-option');
if (option) {
const value = option.getAttribute('data-value');
const text = option.textContent.trim();
// Update native select
subChoiceDropdown.value = value;
// Update custom UI
subChoiceCustomDropdown
.querySelectorAll('.custom-select-option')
.forEach((opt) => {
opt.classList.remove('selected');
opt.removeAttribute('aria-selected');
});
option.classList.add('selected');
option.setAttribute('aria-selected', 'true');
if (subChoiceCustomTrigger) {
subChoiceCustomTrigger.textContent = text;
}
// Trigger change event on native select
const changeEvent = new Event('change', { bubbles: true });
subChoiceDropdown.dispatchEvent(changeEvent);
// Close the custom dropdown after selection
const triggerEl = subChoiceContainer?.querySelector(
'.custom-select-trigger'
);
const dropdownEl = subChoiceContainer?.querySelector(
'.custom-select-dropdown'
);
if (triggerEl && dropdownEl) {
triggerEl.setAttribute('aria-expanded', 'false');
dropdownEl.classList.remove('active');
triggerEl.focus();
}
}
});
}
});
})();
No notes defined.