لتكرار العناصر في القوائم المنسدلة، يجب عليك تصحيح بعض الأخطاء في الكود الحالي وضبطه ليتناسب مع هدفك. هناك عدة تعديلات يجب إجراؤها لتحقيق الهدف المطلوب، وهي كالتالي:
- استخدم
cities
بدلاً منwardname
للاستفادة من بيانات المدن. - قم بإزالة التكرار في إنشاء الخيارات لكل من
wardname
وkoottaymaname
لتجنب الأخطاء. - تأكد من أن البيانات المُرجَعة تأتي في تنسيق JSON صحيح.
قم بتحديث الكود الخاص بك إلى الصيغة التالية:
javascript$(document).ready(function() {
$('#wardno').change(function() {
$("#wardname > option").remove();
$("#koottaymaname > option").remove();
var ward_id = $('#wardno').val();
$.ajax({
type: "POST",
cache: false,
url: "get_wardname/" + ward_id,
success: function(cities) {
try {
$.each(cities, function(index, city) {
$.each(city, function(id, name) {
var opt = $(');
opt.val(id);
opt.text(name);
$('#wardname').append(opt);
});
});
} catch (e) {
alert(e);
}
},
error: function(jqXHR, textStatus, errorThrown) {
alert("jqXHR: " + jqXHR.status + "\ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown);
}
});
});
});
هذا الكود يتوقع أن يكون استجابة الطلب AJAX هي مصفوفة JSON تحتوي على كل عنصر يحمل مفتاح واحد لاسم المدينة. إذا كان تنسيق البيانات الخاص بك مختلفًا، فقد تحتاج إلى ضبط الكود بناءً على تنسيق البيانات الفعلي الذي تحصل عليه.
المزيد من المعلومات
بالطبع! في الكود السابق، يتم استخدام jQuery للتفاعل مع صفحة الويب. عند تغيير القيمة في القائمة المنسدلة #wardno
، يتم إزالة الخيارات من القوائم المنسدلة #wardname
و #koottaymaname
، ثم يتم إجراء طلب AJAX باستخدام القيمة المحددة من #wardno
لاسترداد البيانات اللازمة من الخادم.
نتيجة الطلب AJAX يتم تحليلها كمصفوفة JSON. يتم استخدام $.each
لتكرار العناصر في هذه المصفوفة. بالنسبة لكل عنصر، يتم تكرار القيم داخله لإنشاء خيارات جديدة لكل من #wardname
و #koottaymaname
باستخدام opt.val(id)
و opt.text(name)
.
يُفترض أن الاستجابة من الطلب AJAX تحتوي على بيانات المدينة في تنسيق JSON. ولكن إذا كان تنسيق البيانات الفعلي مختلفًا، فقد تحتاج إلى تعديل الكود ليتماشى مع هذا التنسيق.