JSFiddle - React, Tailwind, and code Playground

by jonjieviduya

JavaScript

$(document).ready(function() {
    $('.select2').select2();
    $.ajax({
        url: '/api/address/cities/{{ $user->address->province }}',
        method: 'get',
        dataType: 'json',
        success: function(barangay) {
            let userBarangayId = '{{ auth()->user()->address->barangay }}';
            let selectData = '<option></option>'

            for(let barangayCount = 0; barangayCount < barangay.length; barangayCount++) {
                selectData += `
                    <option value="${ barangay[barangayCount].id }" ${ (barangay[barangayCount].id == userBarangayId) ? ' selected': '' }>${ barangay[barangayCount].name }</option>
                `
            }

            $('#barangay').html(selectData)
        },
        error: function(response) {}
    })

    $.ajax({
        url: '/api/address/barangays/{{ $user->address->city }}',
        method: 'get',
        dataType: 'json',
        success: function(barangay) {
            console.log(barangay)
            let selectData = '<option></option>'

            for(let barangayCount = 0; barangayCount < barangay.length; barangayCount++) {
                selectData += `
                    <option value=" ${barangay[barangayCount].id }" selected>${ barangay[barangayCount].name }</option>
                `
            }

            $('#barangay').html(selectData)
        },
        error: function(response) {}
    })
});