TechCodeview

נבין איך לנהל את < בחר > אפשרות ב JavaScript במדריך זה.

HTML בחר אפשרות

אפשרות להקל עלינו את רשימת האפשרויות. זה מאפשר לנו לבחור אפשרות אחת או יותר מאופציה אחת. אנו משתמשים באלמנטים ו ליצירת אופציה.

לדוגמה:

 Red Yellow Green Blue 

האפשרות מאפשרת לנו לבחור אפשרות אחת בכל פעם אשר מוזכרת לעיל.

אם נרצה יותר מבחירה אחת, נוכל לכלול תכונה ל< מרובות > אלמנטים למטה:

שלום עולם ג'אווה

 Red Yellow Green Blue 

סוג HTMLSelectElement

אנו משתמשים בסוג HTMLSelectElement לאינטראקציה עם אפשרות ב-JavaScript.

סוג HTMLSelectElement מכיל את התכונות המועילות הבאות:

נבחר אינדקס-תכונה זו נותנת אינדקס אפשרויות נבחרות על בסיס אפס. האינדקס שנבחר יהיה -1 כאשר לא נבחרה אפשרות. כאשר האפשרות מאפשרת בחירות יותר מפעם אחת, האינדקס שנבחר נותן את הערך של האפשרות הראשונה.ערך-תכונת ה-value נותנת את תכונת ה-value של רכיב האופציה שנבחר תחילה אם יש יחיד, אחרת, היא תחזיר את המחרוזות הריקות.מרובות-התכונות המרובות נותנות אמת כאשר הרכיב מאפשר יותר מבחירה אחת. זה זהה לתכונות המרובות.

מאפיין selectIndex

אנו מיישמים את DOM API כמו querySelector() או getElementById() .

הדוגמה מציינת כיצד להשיג את אינדקס האפשרויות שנבחר המוזכר להלן:

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

איך זה עובד:

• תחילה, בחר את הרכיבים ו בעזרת שיטת querySelector() .
• לאחר מכן, קשר את מאזין אירועי קליק לכפתור זה והצג את האינדקס שנבחר בעזרת שיטת alert() אם הכפתור נלחץ.

ערך נכס

תכונת הערך של האלמנט מסתמכת על הרכיב והתכונה המרובה של ה-HTML שלו:

• תכונת הערך של תיבת בחירה תהיה מחרוזת ריקה כאשר לא נבחרה אפשרות.
• תכונת ה-value של תיבת בחירה תהיה הערך של האפשרות שנבחרה כאשר אופציה נבחרה ומכילה את תכונת ה-value.
• תכונת ה-value של תיבת בחירה תהיה הטקסט של האפשרות שנבחרה כאשר אפשרות נבחרה ואינה מכילה תכונת ערך.
• תכונת ה-value של תיבת בחירה תיגזר מהאפשרות שנבחרה הראשונית לגבי שני הכללים האחרונים כאשר נבחרה יותר מאפשרות אחת.

שקול את הדוגמה הבאה:

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

בדוגמה זו לעיל:

• תכונת הערך של האלמנט ריקה כאשר אנו בוחרים באפשרות הראשונית.
• תכונת ה-value של תיבת בחירה תהיה Ember.js מכיוון שהאופציה שנבחרה אינה מכילה תכונה value כאשר אנו בוחרים באפשרות האחרונה.
• תכונת הערך תהיה '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('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; 

בדוגמה, ה sb.option הוא האובייקט דמוי המערך. לפיכך, הוא אינו מכיל את שיטת filter() זהה לאובייקט Array.

עבור השאלת סוגים אלה של שיטות דרך אובייקט מערך, אנו משתמשים בשיטת call() , למטה נותנים את מערך האפשרויות הנבחרות:

 [].filter.call(sb.options, option => option.selected) 

וכדי לקבל את תכונת הטקסט של כל אפשרות, נוכל לשרשר את התוצאה של שיטת filter() יחד עם שיטת map() כמו להלן:

 .map(option => 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;>