Feature #4 : Villages
This commit is contained in:
@@ -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);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user