جافا سكريبت حدد الخيار - دروس جافا سكريبت

سوف نفهم كيفية إدارة < يختار > الخيار في جافا سكريبت في هذا البرنامج التعليمي.

HTML تحديد الخيار

خيار يسهل لنا قائمة الخيارات. يسمح لنا باختيار خيار واحد أو أكثر. نحن نستخدم و العناصر لتشكيل الخيار.

على سبيل المثال:

 Red Yellow Green Blue

يتيح لنا الخيار اختيار خيار واحد في الوقت المذكور أعلاه.

إذا أردنا أكثر من تحديد واحد، فيمكننا تضمين السمة إلى < عديد > العناصر أدناه:

تحديد جدول متعدد في SQL

 Red Yellow Green Blue

نوع HTMLSelectElement

نحن نستخدم نوع HTMLSelectElement للتفاعل مع الخيار في JavaScript.

يحتوي نوع HTMLSelectElement على السمات المفيدة التالية:

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

خاصية الفهرس المحدد

نحن نطبق DOM API مثل محدد الاستعلام () أو getElementById() .

يوضح المثال كيفية الحصول على فهرس الخيارات المحدد والمذكور أدناه:

 JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.selectedIndex); };

كيف تعمل:

في البداية، حدد والمكونات بمساعدة طريقة querySelector().
بعد ذلك، قم بربط مستمع حدث النقر بهذا الزر وعرض الفهرس المحدد بمساعدة طريقة التنبيه () في حالة الضغط على الزر.

خاصية القيمة

تعتمد خاصية قيمة العنصر على المكون والسمة المتعددة لـ HTML الخاص به:

ستكون خاصية القيمة لمربع التحديد عبارة عن سلسلة فارغة عندما لا يتم تحديد أي خيار.
ستكون خاصية القيمة لمربع التحديد هي قيمة الخيار المختار عندما يتم اختيار خيار ويحتوي على سمة القيمة.
ستكون خاصية القيمة لمربع التحديد هي نص الخيار المختار عندما يتم اختيار خيار ولا يحتوي على سمة قيمة.
سيتم اشتقاق خاصية القيمة لمربع التحديد من الخيار المحدد الأولي فيما يتعلق بالقاعدتين السابقتين عند اختيار أكثر من خيار واحد.

خذ بعين الاعتبار المثال أدناه:

 JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (event) =&gt; { event.preventDefault(); alert(sb.value); };

في هذا المثال أعلاه:

سمة قيمة العنصر فارغة عندما نحدد الخيار الأولي.
ستكون سمة القيمة لمربع التحديد هي Ember.js نظرًا لأن الخيار المختار لا يحتوي على سمة قيمة عندما نختار الخيار الأخير.
ستكون سمة القيمة '1' أو '2' عندما نختار الخيار الثالث أو الثاني.

نوع HTMLOptionElement

يوضح نوع HTMLOptionElement العنصر الموجود في JavaScript.

ويحتوي هذا النوع على الخصائص التالية:

فِهرِس- فهرس الخيار ضمن مجموعة الخيارات.

المحدد- تقوم بإرجاع قيمة حقيقية إذا تم تحديد الخيار. لقد قمنا بتعيين الخاصية المحددة صحيحة لتحديد خيار.

نص- يقوم بإرجاع نص الخيار.

قيمة- تقوم بإرجاع سمة قيمة HTML.

يحتوي المكون على سمة خيار تسمح لنا بالوصول إلى خيارات المجموعة:

 selectBox.options

على سبيل المثال، للوصول إلى قيمة ونص الخيار الثاني، نستخدم ما يلي:

 const text = selectBox.options[1].text; const value = selectBox.options[1].value;

للحصول على خيار محدد للمكون مع تحديد فردي، نستخدم الكود أدناه:

 let selectOption = selectBox.options [selectBox.selectedIndex];

بعد ذلك، يمكننا الوصول إلى قيمة ونص الخيار المحدد من خلال خصائص القيمة والنص:

 const selectedText = selectedOption.text; const selectedValue = selectedOption.value;

عندما يسمح المكون بأكثر من تحديد واحد، يمكننا استخدام سمة محددة لتحديد الخيار المحدد:

 JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector(&apos;#btn&apos;); const sb = document.querySelector(&apos;#color&apos;); btn.onclick = (e) =&gt; { e.preventDefault(); const selectValues = [].filter.call(sb.options, option =&gt; option.selected).map (option =&gt; option.text); alert(selectedValues); };

في المثال، sb.option هو كائن يشبه المصفوفة. وبالتالي، فهو لا يحتوي على طريقة filter() مثل كائن Array.

لاستعارة هذه الأنواع من التوابع من خلال كائن مصفوفة، نستخدم طريقة call()، فيما يلي مصفوفة من الخيارات المختارة:

 [].filter.call(sb.options, option =&gt; option.selected)

وللحصول على سمة النص لأي خيار، يمكننا ربط نتائج طريقة التصفية () مع طريقة الخريطة () كما هو موضح أدناه:

 .map(option =&gt; option.text);

للحصول على الخيار المحدد باستخدام الحلقة

يمكننا استخدام حلقة for للتكرار من خلال خيارات القائمة المحددة لتحديد الخيار الذي تم اختياره. يمكن وصف وظيفة لإرجاع المرجع إلى الخيار المحدد أو القيمة. فيما يلي إشارة إلى الخيار المحدد:

 function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>