كيفية تحديث الخيارات تلقائيًا في القائمة المنسدلة الثانية بناءً على التحديد في القائمة المنسدلة الأولى دون استخدام قاعدة بيانات

لديك قائمتان منسدلتان حيث لا يتم استرداد الخيارات من قاعدة بيانات. تسمح القائمة المنسدلة الأولى للمستخدم باختيار فئة. تعتمد الخيارات الموجودة في القائمة المنسدلة الثانية على التحديد في القائمة المنسدلة الأولى.

على سبيل المثال، إذا اختار المستخدم الخيار الأول في القائمة المنسدلة الأولى، فيجب أن تعرض القائمة المنسدلة الثانية الخيارات الهاتف الذكي والشاحن. إذا قام المستخدم بتغيير تحديده إلى الخيار الثاني، فيجب أن تعرض القائمة المنسدلة الثانية الآن الخيارات كرة السلة والكرة الطائرة.

التنفيذ بدون استخدام قاعدة بيانات

<option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>

"1": ["Smartphone", "Charger"],
"2": ["Basketball", "Volleyball"]

};

// امسح الخيارات في القائمة المنسدلة الثانية
const itemsDropdown = document.getElementById("items") ;
itemsDropdown.innerHTML = "";

// أضف الخيارات الجديدة بناءً على الفئة المحددة
const SelectedOptions = options[category.value];
for (خيار const للخيارات المحددة) ) {

const newOption = document.createElement("option");
newOption.value = option;
newOption.textContent = option;
itemsDropdown.appendChild(newOption);

}