كيفية تكرار عناصر JSON في قوائم منسدلة

لتكرار العناصر في القوائم المنسدلة، يجب عليك تصحيح بعض الأخطاء في الكود الحالي وضبطه ليتناسب مع هدفك. هناك عدة تعديلات يجب إجراؤها لتحقيق الهدف المطلوب، وهي كالتالي:

1. استخدم cities بدلاً من wardname للاستفادة من بيانات المدن.
2. قم بإزالة التكرار في إنشاء الخيارات لكل من wardname و koottaymaname لتجنب الأخطاء.
3. تأكد من أن البيانات المُرجَعة تأتي في تنسيق JSON صحيح.

قم بتحديث الكود الخاص بك إلى الصيغة التالية:

javascriptCopy code
$(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. ولكن إذا كان تنسيق البيانات الفعلي مختلفًا، فقد تحتاج إلى تعديل الكود ليتماشى مع هذا التنسيق.