location/resources/assets/js/app.js

import TomSelect from "tom-select";

let settings = {
    plugins: ['dropdown_input'],
    create: true,
    createOnBlur: true
};

const provinceSelect = document.querySelector('#province_code');
const citySelect = document.querySelector('#city_code');

if (provinceSelect && !citySelect) {
    new TomSelect('#province_code', settings);
}

if (citySelect) {
    var tomcities = new TomSelect('#city_code', settings);
    var tomprovince = new TomSelect('#province_code', {
        ...settings, // Spread existing settings
        onChange: function (value) {

            // Destroy only if necessary (prevents unnecessary re-initialization)
            if (tomcities) {
                tomcities.destroy();
            }

            var 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);
                });
        }
    });
}