134 lines
5.0 KiB
JavaScript
134 lines
5.0 KiB
JavaScript
import TomSelect from "tom-select";
|
|
|
|
let settings = {
|
|
plugins: ['dropdown_input'],
|
|
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 && !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();
|
|
}
|
|
|
|
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
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching data:', error);
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
});
|
|
}
|
|
});
|
|
}
|