90 lines
3.0 KiB
JavaScript
90 lines
3.0 KiB
JavaScript
(function() {
|
|
"use strict";
|
|
|
|
function updateOptions(selectElement, data, placeholder) {
|
|
selectElement.innerHTML = "";
|
|
if (placeholder) {
|
|
const opt = document.createElement("option");
|
|
opt.value = "";
|
|
opt.textContent = placeholder;
|
|
selectElement.appendChild(opt);
|
|
}
|
|
data.forEach((item) => {
|
|
const opt = document.createElement("option");
|
|
opt.value = item.id;
|
|
opt.textContent = item.text;
|
|
selectElement.appendChild(opt);
|
|
});
|
|
selectElement.dispatchEvent(new Event("change"));
|
|
}
|
|
|
|
document.addEventListener("change", function(e) {
|
|
if (e.target.matches(".nepkit-province-select")) {
|
|
const province = e.target.value;
|
|
const container = e.target.closest("form") || document;
|
|
const districtSelect = container.querySelector(
|
|
".nepkit-district-select",
|
|
);
|
|
const municipalitySelect = container.querySelector(
|
|
".nepkit-municipality-select",
|
|
);
|
|
|
|
if (districtSelect) {
|
|
if (!province) {
|
|
updateOptions(districtSelect, [], "Select District");
|
|
if (municipalitySelect)
|
|
updateOptions(
|
|
municipalitySelect,
|
|
[],
|
|
"Select Municipality",
|
|
);
|
|
return;
|
|
}
|
|
|
|
const url =
|
|
districtSelect.dataset.url +
|
|
"?province=" +
|
|
encodeURIComponent(province);
|
|
fetch(url)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
updateOptions(districtSelect, data, "Select District");
|
|
});
|
|
}
|
|
}
|
|
|
|
if (e.target.matches(".nepkit-district-select")) {
|
|
const district = e.target.value;
|
|
const container = e.target.closest("form") || document;
|
|
const municipalitySelect = container.querySelector(
|
|
".nepkit-municipality-select",
|
|
);
|
|
|
|
if (municipalitySelect) {
|
|
if (!district) {
|
|
updateOptions(
|
|
municipalitySelect,
|
|
[],
|
|
"Select Municipality",
|
|
);
|
|
return;
|
|
}
|
|
|
|
const url =
|
|
municipalitySelect.dataset.url +
|
|
"?district=" +
|
|
encodeURIComponent(district);
|
|
fetch(url)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
updateOptions(
|
|
municipalitySelect,
|
|
data,
|
|
"Select Municipality",
|
|
);
|
|
});
|
|
}
|
|
}
|
|
});
|
|
})();
|