How to change jQuery to JavaScript?

<script>
    $(document).on('change', '#state_id', function() {
        let state_id = $(this).val();
        let select = $('#city_id');
        $.ajax({
            type: 'get',
            url: '{{ route('findIDProvince') }}',
            data: {'id':state_id},
            success: function(data){
                select.html('');
                for (var i = 0; i < data.length; i++){
                    select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
                }
            },
            error: function(){
                console.log('this is a error');
            },
        });
    }).trigger('change');
</script>

LaryAI

3 years ago

Level 58

Here's how you can convert the jQuery code to vanilla JavaScript:

<script>
    document.querySelector('#state_id').addEventListener('change', function() {
        let state_id = this.value;
        let select = document.querySelector('#city_id');
        let xhr = new XMLHttpRequest();
        xhr.open('GET', '{{ route('findIDProvince') }}' + '?id=' + state_id, true);
        xhr.onload = function() {
            if (this.status === 200) {
                select.innerHTML = '';
                let data = JSON.parse(this.responseText);
                for (let i = 0; i < data.length; i++) {
                    let option = document.createElement('option');
                    option.value = data[i].id;
                    option.textContent = data[i].name;
                    select.appendChild(option);
                }
            } else {
                console.log('this is an error');
            }
        };
        xhr.send();
    });
    document.querySelector('#state_id').dispatchEvent(new Event('change'));
</script>

Note that you'll need to replace {{ route('findIDProvince') }} with the actual URL of your endpoint.

Snapey

3 years ago

Level 122

Welcome back Lary

Now we don't need to bother to answer @oxbir

Please or to participate in this conversation.