הנך נמצא: מדריך בסיסי / שיעור 5 / דף 9
 


המדריך של תאו ל- JavaScript
 


דפים בשיעור זה:
1: מבוא לשיעור 5
2: מבוא לטפסים
3: מניפולציות בטקסט
4: ארועי שדות הטקסט
5: מנהל טפסים
6: תרגילים בשדה הטקסט
7: CheckBoxes
8: כפתורי רדיו
9: בחירות
10: אלמנט onChange
11: סקירה של שיעור 5
|
|
|
|
|
|
|
|
|
|
|
|

שיעור 5

דף 9: בחירות.

בשיעור זה נעבור על הבחירות, שהן מהמוזרות ביותר מאלמנטי הטופס. ישנם שני סוגים עיקריים לבחירות: משיכה למטה (pulldown) ורשימה (list select). הנה שתי דוגמאות להמחשת כל אחד מין הסוגים הקיימים:

Pulldown:

List:

הדבר שגורם לאובייקט הבחירות להיות כל כך משונה הוא העובדה שלכל אובייקט הבחירה כולו יש שם אחד, אבל אין שם לאף אחד מאפשרויות הבחירה שלו. לדוגמא, ב- HTML הבחירה הראשונה תראה כך:

<select name="pulldown_1" size=1>
  <option>probiscus
  <option>spider
  <option>lemur
  <option>chimp
  <option>gorilla
  <option>orangutan
</select>

לתשומת לבך, כל הבחירה נקראת בשם: pulldown_1, אבל האפשרות האינדבדואלית חסרת שם. כל זה מקשה לגשת לאותן אפשרויות אינדבדואליות.

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

window.document.form_1.pulldown_1.options[1].text = 'new_text';

הפקודה עובדת בגלל שלאלמנטי הבחירה יש תכונות לאפשרויות שהן בעצם מערך לכל האפשרויות שנבחרו. אתה יכול לקחת את אחת האפשרויות מהמערך ולשנות את תכונות הטקסט שלה, (האפשרות הראשונה) נסה זאת. שנה את הבחירה ואז עלה למעלה לראות אם התפריט של ה- pulldown באמת השתנה. האפשרות השנייה ב-pulldown צריכה להיות עכשיו "*thau*" (בלי המרחאות כמובן).

בנוסף לתכונות האפשרויות, לבחירה יש תכונה נוספת הנקראת: אינדקס הבחירות (select Index). כאשר אפשרות אחת נבחרת, אז תכונות אינדקס הבחירות יהיו המערך המספרי של האפשרות שנבחרה. על מנת לבדוק זאת, תבחר בבקשה את אחת האפשרויות ברשימת הבחירה (האפשרות השנייה), ואז תבדוק את האינדקס. זכור, שהאפשרות הראשונה במערך הינה אפשרות 0. זוהי השורה שבה השתמשתי למטרת הבדיקה:

<a href="#" onClick="alert('index is: ' + window.document.form_1.list_1.selectedIndex); return false;">check the index</a>

שם הטופס הוא: form_1, ורשימת הבחירה נקראת בשם: list_1. על מנת לקבל את אינדקס הבחירה הסתכלתי ב:

window.document.form_1.list_1.selectedIndex

אם אתה רוצה אתה יכול להציב את אינדקס הבחירה ע"י:

window.document/form_1/list_1/selectedIndex=1;

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

var the_select = window.document.form_1.list_1;
var the_index = the_select.selectedIndex;
var the_selected = the_select.options[the_index].text;

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

כמו שאר האלמנטים של הטפסים, לאלמנטי הבחירה יש אחראי (handler) ל: ()onChange. האחראי הזה מפועל כאשר יש שינוי בבחירה. בשיעור הבא תראה דוגמא משיעור אחד שמראה לך איך onChange עובד עם הבחירה.

חזור לתחילת הדף

לדף הבא «--

 
       
       
   
 
 

עמוד ראשי
מדריך בסיסי
מדריך מתקדם
החלפת תמונות
גניבת קוד
מפת האתר