الأحداث في JavaScript: حدث change

في هذا الدرس، سنتعلم كيفية استخدام حدث `change` في JavaScript للتفاعل مع تغييرات المستخدم على عناصر الإدخال، مثل قائمة الاختيارات.

 حدث change

يُستخدم حدث `change` للتفاعل مع تغييرات المستخدم في القيم المختارة في عناصر الإدخال، مثل عناصر `<select>` في HTML. يتم تنفيذ الكود عندما يقوم المستخدم بتغيير القيمة المحددة.

```javascript
// استهداف عنصر الاختيار الخاص بالدول
var _countries = document.getElementById('countries');

// إضافة مستمع لحدث change
_countries.addEventListener('change', function() {
var _countries = this,
countryValue = _countries.value,
_states = document.getElementById('states');

// التأكد من أن قيمة الدولة المختارة ليست فارغة أو غير معرفة
if (countryValue != '' && countryValue != null) {
// استهداف الولايات المتعلقة بالدولة المختارة
var statesTargeted = _states.getElementsByClassName(countryValue);

// إخفاء كافة عناصر الولايات
for (var _state of _states.children) {
_state.style.display = 'none';
}

// إظهار الولايات المتعلقة بالدولة المختارة فقط
if (statesTargeted.length > 0) {
for (var _state of statesTargeted) {
_state.style.display = 'block';
}
}

// إعادة ضبط القيمة المحددة الأولى في الولايات
_states.firstElementChild.style = 'block';
_states.firstElementChild.selected = true;

} else {
// إخفاء كافة عناصر الولايات إذا لم يتم اختيار دولة
for (var _state of _states.children) {
_state.style.display = 'none';
}
// إعادة ضبط القيمة المحددة الأولى في الولايات
_states.firstElementChild.style = 'block';
_states.firstElementChild.selected = true;
}

});
```

الخلاصة

باستخدام هذا الشرح، يمكنك الآن فهم كيفية استخدام حدث change في JavaScript لإظهار وإخفاء عناصر الولايات بناءً على الدولة المختارة من قائمة الاختيار. يمكنك تطبيق هذه المفاهيم لتحسين تفاعل المستخدمين مع مواقع الويب الخاصة بك.