Feature #4 : Villages

This commit is contained in:
Daeng Deni Mardaeni
2024-08-10 20:12:04 +07:00
parent f1a1f23b12
commit d73a006ce0
15 changed files with 84312 additions and 7 deletions

View File

@@ -2,29 +2,30 @@ import TomSelect from "tom-select";
let settings = {
plugins: ['dropdown_input'],
create: true,
create: false,
createOnBlur: true
};
const provinceSelect = document.querySelector('#province_code');
const citySelect = document.querySelector('#city_code');
const districtSelect = document.querySelector('#district_code');
if (provinceSelect && !citySelect) {
new TomSelect('#province_code', settings);
}
if (citySelect) {
var tomcities = new TomSelect('#city_code', settings);
var tomprovince = new TomSelect('#province_code', {
if (citySelect && !districtSelect) {
let tomcities = new TomSelect('#city_code', settings);
let tomprovince = new TomSelect('#province_code', {
...settings, // Spread existing settings
onChange: function (value) {
console.log('Province selected 1:', value);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomcities) {
tomcities.destroy();
}
var url = 'locations/cities/province/' + value;
let url = 'locations/cities/province/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
@@ -44,3 +45,89 @@ if (citySelect) {
}
});
}
if (districtSelect) {
let tomdistrict = new TomSelect('#district_code', settings);
let tomcities = new TomSelect('#city_code',{
...settings,
onChange: function (value) {
console.log('City selected:', value);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomdistrict) {
tomdistrict.destroy();
}
let url = 'locations/districts/city/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomdistrict = new TomSelect('#district_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
let tomprovince = new TomSelect('#province_code', {
...settings, // Spread existing settings
onChange: function (value) {
console.log('Province selected:', value);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomcities) {
tomcities.destroy();
}
let url = 'locations/cities/province/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomcities = new TomSelect('#city_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options,
onChange: function (value) {
console.log('City selected:', value);
// Destroy only if necessary (prevents unnecessary re-initialization)
if (tomdistrict) {
tomdistrict.destroy();
}
let url = 'locations/districts/city/' + value;
fetch(url)
.then(response => response.json())
.then(data => {
const options = data.map(item => ({
value: item.code,
text: item.name
}));
tomdistrict = new TomSelect('#district_code', {
...settings, // Spread existing settings (including createOnBlur: false)
options: options
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
});
}