العنصر <select>

يُمثِّل العنصر <select> عنصرًا من عناصر النماذج يوفِّر قائمةً من الخيارات.

مثال عن العنصر <select> فيه ثلاثة خيارات (توفَّر عبر العنصر <option>) وتم تحديد الخيار الثاني افتراضيًا (عبر الخاصية selected):

<select name="select">
  <option value="value1">Value 1</option> 
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>

مثال عن العنصر <select> فيه ثلاثة مجموعة من الخيارات (العنصر <optgroup>) ويمكن اختيار أكثر من قيمة فيه (عبر الخاصية multiple) وستُعرَض خمسة أسطر (الخاصية size):

<select name="select" size="5" multiple>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3">
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

تصنيفات المحتوى	عنصر تنظيمي، وعنصر عادي، وعنصر تفاعلي، وعنصر مرتبط بالنماذج.
المحتوى المسموح	صفر مرة أو أكثر من عنصر <option> أو <optgroup>.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLSelectElement

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

autofocus

تسمح لنا هذه الخاصية المنطقية (Boolean) بتحدد أنَّنا نريد أن ينتقل التركيز (focus) إلى هذا العنصر عند تحميل الصفحة ما لم يغيّره المستخدم (مثل الكتابة في عنصر إدخال مختلف).

لا يمكن أن تُستعمَل هذه الخاصية إلا في عنصر واحد فقط مرتبط بالنماذج في المستند.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

disabled

تُشير هذه الخاصية المنطقية (Boolean) إلى أنَّ المستخدم لا يستطيع التفاعل مع هذا العنصر، وإذا لم تُحدَّد قيمة لهذه الخاصية فسترث قيمتها من العنصر الحاوي لها مثل العنصر <fieldset>، وإذا لم يكن هنالك عنصرٌ حاوٍ لهذا العنصر له الخاصية disabled، فسيكون هذا العنصر مفعّلًا.

form

تُحدِّد هذه الخاصية ما هو النموذج الذي ينتمي العنصر <select> إليه، ويجب أن تكون قيمة هذه الخاصية هي مُعرِّف id لعنصر <form> في المستند نفسه.

تسمح لك هذه الخاصية بربط عناصر <select> إلى عناصر <form> الموجودة في أي مكان في المستند، لكن لا يجوز أن يرتبط عنصر <select> موجود ضمن عنصر <form> إلى عنصر <form> آخر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

multiple

هذه الخاصية المنطقية تُشير إذا ما كان من المسموح تحديد أكثر من خيار في القائمة، وإذا لم تكن محددةً فلا يمكن تحديد أكثر من خيار واحد في الوقت نفسه.

name

تُستخدَم هذه الخاصية لتحديد اسم هذا العنصر (الذي سيرتبط معه عند إرسال النموذج).

required

خاصية منطقية (Boolean) تُشير إلى أنَّ هذه العنصر إجباري ويجب تحديد خيار من خياراته على الأقل.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

size

تُمثِّل هذه الخاصية عدد الأسطر (من الخيارات) التي ستُعرَض في هذا العنصر في الوقت نفسه.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.