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

[Anonymous]

Я создал City, Area, Subarea Crud в Laravel 11.
, где город и район просты, работают правильно, но лезвие Subarea в форме добавления, когда город выбран, тогда, почему уважаемые области в этом городе не отображаются в раскрывающемся области. Если вам нужна какая -либо кодовая часть, чтобы понять проблему, я могу это предоставить, но я хочу точное решение моей проблемы.

Код: Выделить всё

@extends('layouts.app')
@section('content')




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


[list]
[*]Route Management
[*]Subarea
[/list]











@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
[i]                                            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 }}


[url={{ route(]id) }}"
class="btn btn-icon btn-sm btn-info-light m-1">
[/i]
[/url]

@csrf
@method('DELETE')

[i][/i]





@endforeach










@endsection
< /code>
Это мой сценарий для заполнения областей раскрывающийся после выбора города:  < /p>





$(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
});

< /code>
Любая помощь очень ценится! Я делаю это, но не решил свою проблему. Затем я пытаюсь изменить запрос Ajax: < /p>





$(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
});

Но это не решило мою проблему.

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