Hi I'm trying to figure out how to fill all fields using ajax call, it successfully doing by selecting category, it loads all related sub_categories.

But sub_sub_category fields are empty. Only when I choose sub_category option it will load all sub_sub_categories, but I want all prefilled once category has been changed. I don't mind to leave like this, but problem is if I have only single sub_category I can not select any sub_sub_category even if they have any I tried to convert to function and call them but no success.

Code below:

<script>
    $(document).ready(function() {
        get_sub_sub_category();
        $('select[name="category_id"]').on('change', function() {
            var category_id = $(this).val();
            if(category_id) {
                $.ajax({
                    url: "{{ url('/category/sub-category/') }}/"+category_id,
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        $('select[name="sub_sub_category_id"]').html('');
                        var d = $('select[name="sub_category_id"]').empty();

                        $.each(data, function(key, value) {
                            $('select[name="sub_category_id"]').append('<option value="'+ value.id +'">' + value.sub_category_name + '</option>');
                        });
                        get_sub_sub_category();
                    },
                })
            } else {
                alert('danger');
            }
        });


        function get_sub_sub_category() {
            $('select[name="sub_category_id"]').on('load change', function () {
                var sub_category_id = $(this).val();
                if (sub_category_id) {
                    $.ajax({
                        url: "{{ url('/category/sub-sub-category/') }}/"+sub_category_id,
                        type: "GET",
                        dataType: "json",
                        success: function (data) {
                            var d = $('select[name="sub_sub_category_id"]').empty();
                            $.each(data, function (key, value) {
                                $('select[name="sub_sub_category_id"]').append('<option value="' + value.id + '">' + value.sub_sub_category_name + '</option>');
                            });
                        },
                    })
                } else {
                    alert('danger');
                }
            });
        }
    });

</script>