js

<script>
    String.prototype.toTitle = function () {
        return this.replace(/(^|\s)\S/g, function (t) { return t.toUpperCase() });
    }

    // const submitBtn = $('#submit_btn')

    function resetDropdown(targets) {
        // submitBtn.attr('disabled')
        targets.forEach(t => {
            t.html(null)
            t.attr('disabled', true)
            t.val(undefined)
            t.selectpicker('refresh')
        });
    };

    function generateSelectOptions(target, list) {
        resetDropdown([target]);
        list.forEach(val => {
            target.append(`<option value="${val}">${val.toTitle()}</option>`);
        });
        target.attr('disabled', false);
        target.selectpicker('refresh')
        target.selectpicker('toggle')
    };

    function ajaxBase(ask, data) {
        return {
            url: '/api/prices/national/reference',
            type: 'get',
            data: {
                ask,
                ...data
            }
        }
    }

    (function () {
        const inputElements = {
            orig_province: $('#id_orig_province'),
            orig_city: $('#id_orig_city'),
            dest_province: $('#id_dest_province'),
            dest_city: $('#id_dest_city'),
            dest_subdistrict: $('#id_dest_subdistrict'),
        };

        inputElements.orig_province.change(function () {
            $.ajax({
                ...ajaxBase('orig_city', { orig_province: inputElements.orig_province.val() }),
                success: function (resp) {
                    generateSelectOptions(inputElements.orig_city, resp.data);
                    resetDropdown([inputElements.dest_province, inputElements.dest_city, inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.orig_city.change(function () {
            $.ajax({
                ...ajaxBase('dest_province', {
                    orig_province: inputElements.orig_province.val(),
                    orig_city: inputElements.orig_city.val(),
                }),
                success: function (resp) {
                    generateSelectOptions(inputElements.dest_province, resp.data);
                    resetDropdown([inputElements.dest_city, inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.dest_province.change(function () {
            $.ajax({
                ...ajaxBase('dest_city', {
                    orig_province: inputElements.orig_province.val(),
                    orig_city: inputElements.orig_city.val(),
                    dest_province: inputElements.dest_province.val()
                }),
                success: function (resp) {
                    generateSelectOptions(inputElements.dest_city, resp.data);
                    resetDropdown([inputElements.dest_subdistrict,]);
                }
            });
        });

        inputElements.dest_city.change(function () {
            $.ajax({
                ...ajaxBase('dest_subdistrict',
                    {
                        orig_province: inputElements.orig_province.val(),
                        orig_city: inputElements.orig_city.val(),
                        dest_province: inputElements.dest_province.val(),
                        dest_city: inputElements.dest_city.val()
                    }),
                success: function (resp) {
                    generateSelectOptions(inputElements.dest_subdistrict, resp.data);
                }
            });
        });
        // inputElements.dest_subdistrict.change(function () {
        //     submitBtn.removeAttr('disabled')
        // })
    })();
</script>