Выбор города не заполняет раскрывающееся место в моей форме Subarea в Laravel 11 ⇐ Jquery

[Anonymous]

Я создал City, Area, Subarea Crud в Ларавеле 11.
, где город и район просты, работают правильно, но лезвие Subarea in add form

Когда город выбран, то почему уважаемые районы этого города не показывают в раскрывающемся районе. Я проверяю и использую решение CATGPT в своем скрипте AJAX Blade и пробую почти каждое решение, но проблема не решена. Если вам нужна какая-либо кодовая часть, чтобы понять проблему, я могу это предоставить, но я хочу точное решение моей проблемы.
`@extends('layouts.app')
@section('content')




{{ isset($subarea) ? 'Edit Sub Area' : 'Add Sub Area' }}

• Route Management
• Subarea

@csrf
@if (isset($subarea))
@method('PUT')
@endif


City

Select a City
@foreach ($cities as $city)
city_id == $city->id ? 'selected' : '' }}>
{{ $city->city_name }}

@endforeach


Area

Select an Area
@if(isset($subarea))
@foreach($subarea->city->areas as $area)
area_id == $area->id ? 'selected' : '' }}>
{{ $area->area_name }}

@endforeach
@endif


Sub Area Name
value="{{ old('sub_area_name', isset($subarea) ? $subarea->sub_area_name : '') }}"
placeholder="Sub Area Name">

{{ isset($subarea) ? 'Update' : 'Add' }}










Saved Sub Areas




City
Area
Sub Area
Action



@foreach ($subareas as $subarea)

{{ $subarea->city->city_name }}
{{ $subarea->area->area_name }}
{{ $subarea->sub_area_name }}


id) }}"
class="btn btn-icon btn-sm btn-info-light m-1">



@csrf
@method('DELETE')







@endforeach










@endsection

`This is My script to populate areas dropdown after city is selected`





$(document).ready(function() {
$('.js-example-basic-single').select2();

// Handle city change
$('#city-dropdown').on('change', function() {
var cityId = $(this).val();
var areaDropdown = $('#area-dropdown');

areaDropdown.empty().append('Loading...');

if (cityId) {
$.ajax({
url: "{{ route('get-areas', '') }}/" + cityId,
type: 'GET',
success: function(data) {
areaDropdown.empty()
.append('Select an Area');
$.each(data, function(index, area) {
areaDropdown.append(new Option(area.area_name, area.id));
});
areaDropdown.trigger('change');
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
areaDropdown.empty().append('Error loading areas');
}
});
}
});

// Trigger initial load if editing
@if(isset($subarea))
$('#city-dropdown').trigger('change');
@endif
});


Any help is much appreciated!

I tried ChatGPT But it waste my many time I can't find exact solution ChatGPT says me that check select2 and jquery load before script of ajax. I do this but not solved my problem. Then I try to change ajax query :






$(document).ready(function() {
$('.js-example-basic-single').select2();

// Handle city change
$('#city-dropdown').on('change', function() {
var cityId = $(this).val();
var areaDropdown = $('#area-dropdown');

areaDropdown.empty().append('Loading...');

if (cityId) {
$.ajax({
url: "{{ route('get-areas', '') }}/" + cityId,
type: 'GET',
success: function(data) {
areaDropdown.empty()
.append('Select an Area');
$.each(data, function(index, area) {
areaDropdown.append(new Option(area.area_name, area.id));
});
areaDropdown.trigger('change');
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
areaDropdown.empty().append('Error loading areas');
}
});
}
});

// Trigger initial load if editing
@if(isset($subarea))
$('#city-dropdown').trigger('change');
@endif
});
`

but this not solve my problem.


Подробнее здесь: https://stackoverflow.com/questions/794 ... -in-larave