fix: load cities dynamically based on selected province

2026-08-18 19:36:59 +03:30
parent ea76f658ce
commit cc87514e8f
4 changed files with 68 additions and 32 deletions
@@ -271,37 +271,68 @@
        </div>

    </main>
+    @push('scripts')
+        <script>
+            $(document).ready(function () {
+                const provinceSelect = $('#province_id');
+                const citySelect = $('#city_id');

-    <script>
-        $(document).ready(function () {
-            $('#province_id').on('change', function () {
-                let provinceId = $(this).val();
-                let citySelect = $('#city_id');

-                citySelect.prop('disabled', true);
+                const oldProvinceId = "{{ old('province_id') }}";
+                const oldCityId = "{{ old('city_id') }}";

-                if (!provinceId) {
-                    citySelect.html('<option value="">ابتدا استان را انتخاب کنید</option>');
-                    return;
+                function loadCities(provinceId, selectedCityId = null) {
+                    if (!provinceId) {
+                        citySelect.html('<option value="">ابتدا استان را انتخاب کنید</option>');
+                        citySelect.prop('disabled', true);
+                        return;
+                    }
+
+                    citySelect.html('<option value="">در حال بارگذاری شهرها...</option>');
+                    citySelect.prop('disabled', true);
+
+                    let url = "{{ route('locations.cities', ':provinceId') }}".replace(':provinceId', provinceId);
+
+                    $.ajax({
+                        url: url,
+                        type: 'GET',
+                        dataType: 'json',
+                        success: function (cities) {
+                            citySelect.empty();
+                            citySelect.append('<option value="">انتخاب شهر</option>');
+
+                            $.each(cities, function (index, city) {
+                                let isSelected = (selectedCityId && selectedCityId == city.id) ? 'selected' : '';
+                                citySelect.append(
+                                    `<option value="${city.id}" ${isSelected}>${city.name}</option>`
+                                );
+                            });
+
+                            citySelect.prop('disabled', false);
+                        },
+                        error: function (xhr) {
+                            console.error('Error:', xhr.responseText);
+                            citySelect.html('<option value="">خطا در دریافت لیست شهرها</option>');
+                        }
+                    });
                }

-                citySelect.html('<option value="">در حال بارگذاری...</option>');

-                $.get('/get-cities/' + provinceId, function (data) {
-                    citySelect.html('<option value="">انتخاب شهر</option>');
-
-                    $.each(data, function (key, city) {
-                        citySelect.append(
-                            '<option value="' + city.id + '">' + city.name + '</option>'
-                        );
-                    });
-
-                    citySelect.prop('disabled', false);
-                }).fail(function () {
-                    citySelect.html('<option value="">خطا در دریافت شهرها</option>');
+                provinceSelect.on('change', function () {
+                    let provinceId = $(this).val();
+                    loadCities(provinceId);
                });
+
+
+                if (oldProvinceId) {
+                    loadCities(oldProvinceId, oldCityId);
+                }
            });
-        });
-    </script>
+        </script>
+    @endpush
+
+
+
+

@endsection