السلام عليكم, هذا كود بلغة PHP و JQuery يوضح لك طريقة عملها.
يفضل دائماً حماية الكود البرمجي من جهة الفرونت إند وكذلك الباك إند, حيث عند عمل النماذج وتحديد الدولة وعمل كود JQuery لإظهار المدن حسب الدولة المحددة. قد نعتقد ان هذا الامر كافي, لكن بصراحة قد يتم التلاعب من بعض المستخدمين, وهذا أمر وارد.
لذا يفضل أيضاً التأكد من طرف الباك إند, قد يبدو الأمر مرهق خاصة في الأنظمة الكبيرة, لكن أنا شخصياً اقوم بإعتماد رقم المدينة المدخل من طرف المستخدم, إنما رقم الدولة وإن كان مدخل أيضاً من النموذج, لا أتعامل معه.
إبحث عن رقم الدولة من جدول المدينة وبالتالي يكون الضمان بأن جميع البيانات المدخلة صحيحة.
كذلك عند تعيين بعض الحقول بأنها مطلوب ولا يمكن أن تكون قيمتها null, بعض المبرمجين يقوم فقط بتعيين مربع النص بإنه Required, لكن هذا أيضاً غير كاف, يجب إستخدام Validation من طرف الباك إند قبل عملية التخزين أو التعديل على قواعد البيانات.
بشكل عام الهدف الأساسي من عملنا هو إنشاء قواعد البيانات وتحديد العلاقات بينها بشكل صحيح, لتخزين البيانات بطرق تساعدنا في إسترجاع المعلومات المطلوبة بسرعة ودقة عالية, دون حدوث أي خلل فيها.
تخزين المفاتيح الأجنبية ليس أمر إختياري إنما إجباري وأحياناً قد نحتاج لإضافة بعض الحقول تبدو على المدى القريب بعدم أهميتها, لكن بالمستقبل وعند تضخم حجم البيانات, تكون مساعداً أساسيا في عمليات البحث والفلترة.
<select class="full-width country" id="person_country_id" required name="person_country_id" data-init-plugin="select2">
<option value=""></option>
@foreach($countries as $one)
<option value="{{@$one->country_id}}">{{@$one->country->name}}</option>
@endforeach
</optgroup>
</select>
<select class="full-width city" id="person_city_id" required name="person_city_id" data-init-plugin="select2">
</select>
<script>
$(document).ready(function(){
$(document).on('change','.country',function(e){
var country_id = $(this).val();
var url = "{{ url(app()->getLocale().'/getCities/') }}";
if(country_id){
$.ajax({
type: "GET",
url: url+'/'+country_id,
success: function (response) {
if(response)
{
$(".city").empty();
$(".city").append('<optgroup label="{{__('website.choose_city')}}">');
$.each(response, function(index, value){
$(".city").append('<option value="'+value.id+'">'+ value.name +'</option>');
$(".city").append('</optgroup>');
});
}
}
});
}
else{
$(".city").empty();
}
});
)};
</script>