شرح دوره الـ JavaScript للمبتدئين - الدرس الثالث والعشرون

select object

هو عباره عن قائمه منسدله (drop down list) أو list box , وهى من العناصر المستخدمه فى html form.
وهذا هو الشكل الذى نتحدث عنه

يمكننا استخدامها فى اختيار لون خلفيه الصفحه ,أو اختيار صفحه لفتحها , أو استخدامها فى الاسئله لكى تتيح للمسخدم اختيار الاجابه الصحيحه من ضمن مجموعه من الاجابات ....وغيرها

الشكل العام للكود هو:

<select name="mySelectBox">
<option>First option</option>
<option>Second option</option>
<option>Third option</option>
.
.
.
<option>Final option</option>
</select>

الخصائص (properties) الخاصه بـ (select object)

1. length --------> عباره عن قيمه integer توضح عدد الاختيارات (options) داخل كود select ويمكننا كتابته كالتالى:     

document.formName.selectName.length;

     2.  name --------> عباره عن قيمه نصيه (string value) يوضح اسم select المكتوب فى name attribute بداخل select> tag>

document.formName.selectName.name;

     3.  options ------> هذه الخاصيه لها بعض الخصائص الفرعيه (subproperties) الخاصه بها وهم:

• length ----> عباره عن قيمه integer توضح عدد الاختيارات (options) داخل كود select ويمكننا كتابته كالتالى: 

document.formName.selectName.options.length;

• selectIndex---> عباره عن قيمه integer يوضح رقم index الخاص بالاختيار الذى اختاره المستخدم ويبدأ الترقيم من الصفر 

     4.  [options[i ---------> تمثل (i) رقم index للاختيار المحدد فى الوقت الحالى
         [options[i لها بعض الخصائص الفرعيه وهم :

• defaultSelected -----> عباره عن قيمه Boolean أى تعطى قيمه true أو false , فهى تعطى قيمه true إذا كان الاختيار تم اختياره افتراضيا  (selected by default) بمعنى انه يكون الاختيار الظاهر فى القائمه حتى وإذا لم يكن هو هو الاختيار الاول المموجود بالقائمه . يمكننا جعل واحد من الاختيارات (selected by default) كالتالى:

<option selected>second option</option>

• selected------> عباره عن قيمه Boolean تستخدم لمعرفه أى من الاختيارات تم اختياره من قبل المستخدم ويمكننا كتابه الكود كالتالى :

document.formName.selectName.options[i].selected;

• text ----> عباره عن قيمه نصيه (string value) تستخدم لمعرفه النص الذى يتبع option> tag> , بمعنى النص الذى يظهر فى القائمه المنسدله ويمكننا كتابته كالتالى:

document.formName.selectName.options[i].text;

• value ----> عباره عن قيمه نصيه يتم منها معرفه النص المكتوب بداخل value attribute المكتوب بداخل option> tag>

**ومن أشهر (event handler) المستخدمه فى select object  هو ...........> onChange

فيتم تنفيذ ما بداخله فى حاله أن المستخدم اختار خيار من الخيارات الموجوده.

مثــــــــــــال

لاستخدام الكود السابق يرجى ازاله وسوم التعليق  من البدايه --!> ومن النهايه <--

عند تنفيذ الكود نرى  التالى

عند الضغط على السهم نلاحظ الاتى

وعند الضغط على button المكتوب عليه default value  نرى الاتى

مثــــــــــــال

لاستخدام الكود السابق يرجى ازاله وسوم التعليق  من البدايه --!> ومن النهايه <--

عند تنفيذ الكود نرى الاتى:

وعند الضغط على السهم نرى مجموعه الاختيارات لالوان خلفيه الصفحه كما هو واضح

ونلاحظ تغير لون خلفيه الصفحه عند اختيار أى من الخيارات الموجوده كالتالى:

وفى كل مره نختار لون من القائمه يتم تغيير لون الخلفيه.