استخدام JavaScript لاستعراض وتحديد عناصر مصفوفة في HTML

فيما يلي طريقة الحصول على العناصر الأولى والثانية من مصفوفة في لغة البرمجة JavaScript:

javascriptCopy code
// الصورة البيانية للمصفوفة
const arrayImage = 'https://i.stack.imgur.com/hkxB5.png';

// المصفوفة
const myArray = [
  { code: 'AF', name: 'Afghanistan' },
  { code: 'AL', name: 'Albania' },
  { code: 'DZ', name: 'Algeria' },
  // ... المزيد من العناصر
];

// الحصول على العنصر الأول
const firstElement = myArray[0];

// الحصول على العنصر الثاني
const secondElement = myArray[1];

// إنشاء عنصر select في HTML وتعيين قيمه
const selectElement = document.createElement('select');

// إنشاء عناصر option للقيم الأولى والثانية
const option1 = document.createElement('option');
option1.value = firstElement.code;
option1.text = firstElement.name;

const option2 = document.createElement('option');
option2.value = secondElement.code;
option2.text = secondElement.name;

// إضافة العناصر إلى عنصر select
selectElement.add(option1);
selectElement.add(option2);

// إضافة عنصر select إلى الصفحة
document.body.appendChild(selectElement);

يمكنك نسخ ولصق هذا الكود في جزء script في صفحة HTML الخاصة بك. سيقوم الكود بإنشاء عنصر select وإضافة العناصر الأولى والثانية من المصفوفة كخيارات في القائمة المنسدلة.

بالطبع، دعنا نوسع المحتوى بمزيد من المعلومات حول كيفية العمل مع مصفوفة واستخدام قيمها في HTML وJavaScript.

في سياق لغة البرمجة JavaScript، يُستخدم الفهرس (index) للوصول إلى عناصر محددة في المصفوفة. في الكود الذي قدمته سابقًا، تم استخدام [0] للوصول إلى العنصر الأول و [1] للوصول إلى العنصر الثاني في المصفوفة myArray.

تتكون كل عنصر من مصفوفة من مفتاحين: code و name، حيث يُمكن الوصول إلى قيمهما باستخدام firstElement.code و firstElement.name على التوالي.

أيضًا، تم إنشاء عناصر select و option باستخدام واجهة DOM (Document Object Model) في JavaScript. هذه الواجهة تسمح للمطورين بالتفاعل مع عناصر HTML عبر البرمجة.

يمكن تحسين الكود ليتعامل مع مصفوفة متغيرة الحجم، وذلك بواسطة تكرار لوب (for loop) للانتقال عبر جميع العناصر وإضافتها تلقائيًا إلى القائمة المنسدلة. على سبيل المثال:

javascriptCopy code
// الصورة البيانية للمصفوفة
const arrayImage = 'https://i.stack.imgur.com/hkxB5.png';

// المصفوفة
const myArray = [
  { code: 'AF', name: 'Afghanistan' },
  { code: 'AL', name: 'Albania' },
  { code: 'DZ', name: 'Algeria' },
  // ... المزيد من العناصر
];

// إنشاء عنصر select في HTML وتعيين قيمه
const selectElement = document.createElement('select');

// استخدام حلقة لإضافة العناصر إلى القائمة المنسدلة
for (let i = 0; i < myArray.length; i++) {
  const option = document.createElement('option');
  option.value = myArray[i].code;
  option.text = myArray[i].name;
  selectElement.add(option);
}

// إضافة عنصر select إلى الصفحة
document.body.appendChild(selectElement);

بهذه الطريقة، يمكنك التعامل مع مصفوفة تحتوي على عدد متغير من العناصر دون الحاجة إلى تحديد كل عنصر بشكل منفصل.