كيفية الحصول على القيمة المحددة من القائمة المنسدلة في JavaScript: شرح كامل

توقف عن التخمين: كيف تستخرج القيمة المحددة من القائمة المنسدلة في JavaScript؟

هل سبق لك أن واجهت موقفًا حيث يختار المستخدم شيئًا من قائمة منسدلة على موقع الويب، ولا يستطيع برنامجك "رؤية" ذلك؟ مألوف، أليس كذلك؟ هذا أحد أكثر الأسئلة شيوعًا على Stack Overflow (ولسبب وجيه!)، والذي يطرحه الآلاف من المطورين المبتدئين وحتى ذوي الخبرة. قد يبدو الأمر بسيطًا، لكن هناك تفاصيل دقيقة، وسنقوم بتحليلها مرة واحدة وإلى الأبد اليوم.

في هذه المقالة، سأعرض لكم ليس طريقة واحدة، بل عدة طرق للحصول على القيمة المحددة من القائمة المنسدلة باستخدام JavaScript الخالص. ستتعرف على الفرق بين value و selectedIndex، وكيفية معالجة حدث الاختيار، وكيفية تجنب الوقوع في فخ التحديد المتعدد. هيا بنا!

أبسط طريقة: الخاصية value

تخيل أن لديك عنصر select عادي في HTML:

<select id="city">\n  <option value="moscow">موسكو</option>\n  <option value="spb">سانت بطرسبرغ</option>\n  <option value="kazan">قازان</option>\n</select>

للحصول على القيمة المحددة، نحتاج فقط إلى فعل شيئين:

\n
1. العثور على عنصر <select> في DOM.
\n
2. قراءة الخاصية value الخاصة به.
\n

إليك كيف يبدو ذلك في الكود:

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // سيطبع، على سبيل المثال، "spb"

مهم! الخاصية value لعنصر <select> تقوم تلقائيًا بإرجاع السمة value لعنصر <option> المحدد حاليًا. هذه هي الطريقة الأبسط والموصى بها إذا كنت بحاجة إلى القيمة وليس النص.

ماذا لو كنت بحاجة إلى الحصول على نص العنصر المحدد؟

أحيانًا نحتاج ليس إلى القيمة، بل إلى ما يراه المستخدم (على سبيل المثال، "موسكو" بدلاً من "moscow"). لهذا، هناك الخاصية textContent (أو innerText) للخيار المحدد. لكن أولاً، نحتاج إلى الحصول على الخيار نفسه:

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // سيطبع "موسكو"

هنا نستخدم selectedIndex — وهو فهرس العنصر المحدد (بدءًا من 0). ثم نصل إلى مجموعة options ونأخذ العنصر المطلوب.

كيفية التفاعل مع تغيير الاختيار في الوقت الفعلي؟

مجرد الحصول على القيمة مرة واحدة أمر جيد، لكن في الغالب نحتاج إلى فعل شيء عندما يغير المستخدم اختياره. لهذا، نستخدم الحدث change:

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('القيمة المحددة:', selectedValue);\n  console.log('النص المحدد:', selectedText);\n});

الآن، في كل مرة يغير فيها المستخدم المدينة في القائمة المنسدلة، نحصل فورًا على البيانات المحدثة. مريح، أليس كذلك؟

حالة خاصة: التحديد المتعدد (multiple select)

ماذا لو كان لديك قائمة منسدلة مع اختيار متعدد؟ على سبيل المثال:

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

في هذه الحالة، سيعيد selectElement.value القيمة المحددة الأولى فقط، وليس الكل. للحصول على جميع العناصر المحددة، تحتاج إلى التكرار عبر مجموعة options:

const selectElement = document.getEl