// There are two ways...
// No:1.......

$(function() {
    $('#category').change(function() {
        var cat = $(this).val();
        $.get('{{ url("categories") }}', {'cat_id': cat}, function (data) {
            $('#subcategory').empty();

            $.each(data, function(key, value) {
                $('#subcategory').append("<option value='"+ value.id +"'>" + value.name + "</option>");
            });
        });
    });
});


// No:2............

$('#upozilla').prepend('<option value="1" selected>--None--</option>');
$('#district').on('change', function(e){ // Pre-populate upozilla with selecting district dropdown
  console.log(e);
  var district_id = e.target.value;
  $('#upozilla').empty();
  $.get('{{ url("/upozilla-populate?district_id=") }}'+district_id, function(data){
    $.each(data, function(index, upozillaObj){
      $("#upozilla").empty();
      $('#upozilla').append('<option value="'+upozillaObj.id+'">'+upozillaObj.upozilla_name_bn+'</option>');
    });
    $('#upozilla').prepend('<option value="1" selected>--None--</option>');
  });
});

// Then get the cat_id or district_id in php file and select data and return the data in json format
// In laravel get the id in your controller and return the data in json format