https://varanmatrimony.com/public/web/js/dropdown.js

1$(document).ready(function () {
2    const csrfToken = $('meta[name="csrf-token"]').attr('content');
3
4    const dropdownMappings = [
5        { trigger: '#country', target: '#state', url: 'get-states', param: 'country', reset: ['#city'], placeholder: 'Select State' },
6        { trigger: '#state', target: '#city', url: 'get-cities', param: 'state', reset: [], placeholder: 'Select City' },
7        { trigger: '#occupation_type', target: '#occupation', url: 'get-occupations', param: 'occupation_type', reset: [], placeholder: 'Select Occupation' },
8        { trigger: '#education_level', target: '#education', url: 'get-education', param: 'education_level', reset: [], placeholder: 'Select Education' },
9        { trigger: '#caste', target: '#sub_caste', url: 'get-subCastes', param: 'caste', reset: [], placeholder: 'Select Caste' },
10        { trigger: '#religion', target: '#religion_caste', url: 'get-religionCastes', param: 'religion', reset: [], placeholder: 'Select Community' },
11
12        { trigger: '#birth_country', target: '#birth_state', url: 'get-states', param: 'country', reset: ['#birth_city'], placeholder: 'Select State' },
13        { trigger: '#birth_state', target: '#birth_city', url: 'get-cities', param: 'state', reset: [], placeholder: 'Select City' },
14
15        { trigger: '#work_country', target: '#work_state', url: 'get-states', param: 'country', reset: ['#work_city'], placeholder: 'Select State' },
16        { trigger: '#work_state', target: '#work_city', url: 'get-cities', param: 'state', reset: [], placeholder: 'Select City' },
17    ];
18
19

20    dropdownMappings.forEach(({ trigger, target, url, param, reset, placeholder }) => {
21        $(document).on('change', trigger, function () {
22            let value = $(this).val();
23            resetDropdowns([{ selector: target, placeholder }, ...reset.map(sel => ({ selector: sel, placeholder: 'Select' }))]);
24            if (value) fetchData(url, { [param]: value }, target);
25        });
26    });
27
28
29    function resetDropdowns(dropdowns) {
30        dropdowns.forEach(({ selector, placeholder }) => {
31            $(selector).html(`<option value="">${placeholder}</option>`);
32        });
33    }
34
35    function fetchData(url, data, targetDropdown) {
36        $.post(url, { _token: csrfToken, ...data }, function (response) {
37            $(targetDropdown).append(response.map(name => `<option value="${name}">${name}</option>`));
38        });
39    }
40
41});