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>

CodePudding user response：

You might want to consider the following.

$(function() {
  $('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>');
          });
          $('select[name="sub_category_id"]').trigger("change");
        },
      })
    } else {
      alert('danger');
    }
  });

  $('select[name="sub_category_id"]').on('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');
    }
  });
});

This defined the callbacks for both. For category, when it is changed, it triggers change event on sub-category. This in turn will cascade the loading of the next Select.

If you need further help, please provide a Minimal, Reproducible Example.