תיבות רשימה מקושרות – חלק א'

יש לנו שתי רשימות מידע (לעיתים אף גדולות) התלויות אחת בשניה ואנו מעוניינים לקשר ביניהן ללא רענון העמוד. הדבר ניתן לביצוע בקלות רבה בעזרת JS בצד לקוח.
במאמר הבא נשתמש ביצרני מכוניות ודגמי מכוניות בתיבות הבחירה לשם דוגמא בלבד.

איך מתחילים?

נתחיל בכתיבת ה-HTML הבסיסי שעליו יתבצעו כל השינויים באופן דינאמי.

<select name="manufacturer" id="manufacturer" OnChange="makeDymList(0,this.value);">
 <option value="0">כל היצרנים</option>
 <option value="1">הונדה</option>
 <option value="2">טויוטה</option>
 <option value="3">פורד</option>
 <option value="4">שברולט</option>
</select>

<select name="model" id="model"></select> 

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

יצירת הרשימה

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

נתחיל ביצירת המערך:

var arrList = new Array()

למערך קראנו arrList והוא יכיל את כל רשימת הנתונים הדינאמיים (במקרה הזה, דגמי מכוניות).
כל ערך במערך שלנו יכיל רשימת דגמי מכוניות לכל יצרן כמערך נפרד. בצורה כזו נוכל להפריד את דגמי המכוניות לכל יצרן ובעזרת לולאה פשוטה להציג את הרשימה באופן דינאמי בעמוד.

דוגמא לפורמט רשימה דינאמית במערך ותת מערך משלה:

arrList[x] = new Array('value','output');

• x = מספר אשר חייב להיות זהה למספר הערך בתיבת הבחירה הראשונה (למשל הערך של טויוטה הוא 2).
  
• value = ערך מספרי/מחרוזת אשר יהיה תחת המאפיין value של האופציה בתיבת הבחירה (option).
  
• output = הערך המייצג באופציה של תיבת הבחירה (למשל טויוטה הוא המייצג של הערך 2).

כעת לאחר שהבנו כיצד פורמט הרשימה הדינאמית בנוי נוכל ליצור את רשימת הדגמים שלנו.

arrList[0] = new Array('כל הדגמים','0');
arrList[1] = new Array('אקורד','1','סיוויק','2');
arrList[2] = new Array('קורולה','3','אוואלון','4','קאמרי','5','סליקה','6');
arrList[3] = new Array('פוקוס','7','פומה','8');
arrList[4] = new Array('מאליבו','9','בלייזר','10','אופטרה','11'); 

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

הפונקציה

כל מה שנותר לנו לעשות על מנת לבצע את הבחירה הדינאמית הוא ליצור את הפונקציה שתעשה זאת.
תחילה, יש ליצור את הפונקציה והערכים שהיא אמורה לקבל:

function makeDymList(selectedID, currListNumber) {

קראנו לפונקציה בשם makeDymList.
הפונקציה חייבת לקבל 2 ערכים על מנת לעבוד כראוי.
selectedID = ערך שקיים בתוך הרשימה הדינאמית (דגמי מכוניות) ואותו נרצה להפוך לברירת מחדל (selected).
currListNumber = ערך מספרי אשר נשתמש בו כדי לזהות את האלמנט הנכון במערך של רשימת דגמי המכוניות עפ"י היצרן הנבחר.


נתחיל במשפט תנאי פשוט בתוך הפונקציה:

if(selectedID==0)selectedID=1;

מערכים מתחילים לרוב ב-0 אך בתיבות הבחירה ובשאר מקומות מתחילים ב-1.
על מנת שנוכל לבצע תאימות בין תיבות הבחירה למערך נצטרך להחסיר ב-1 את הערך הנבחר שנשלח לפונקציה. במידה והערך שנשלח הוא 0 נצטרך להציב במקומו את הערך 1.
לדוגמא, אם נשלח את הערך 4 לפונקציה אז הערך השווה לו במערך יהיה 3 (4-1=3).


כעת נציב במשתנה את המערך שנמצא באלמנט המערך הכללי שלנו עפ"י הערך המספרי שנשלח לפונקציה (הערך המספרי של היצרן):

var list = arrList[currListNumber];
var selList = document.getElementById("model");
selList.options.length = 0; 

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


נתחיל ביצירת הלולאה אשר תעבור על כל רשימת הדגמים להדפסה דינאמית:

for(var i=0;i<list.length;i+=2) { 

ניתן לראות כי הערך ההתחלתי של המשתנה שלנו הוא 0 (i) והלולאה תמשיך עד שהיא תגיע לסוף המערך שלנו. המשתנה i יעלה כל פעם ב-2 במקום ב-1 כיוון שכל 2 ערכים במערך שווים לאופציה אחת (ערך אחד הוא ערך האופציה והשני הוא הערך המייצג).

כעת ניצור את האופציה הנוכחית בלולאה באופן דינאמי בעזרת new Option:

selList.options[i/2] = new Option(list[i],list[i+1]);  

selList מכיל את הגישה לתיבת הבחירה השנייה שלנו. אנחנו חייבים לבצע את פעולת החילוק של i/2 כיוון שכל 2 ערכים במערך שווים ל- 1 בתיבת הבחירה.

מה שנותר לנו לעשות הוא לבצע בחירה (selected) לערך ברירת המחדל שאנו מעוניינים שייבחר ברשימת הדגמים הנוכחית בעזרת שימוש המאפיין selected:

if((selectedID-1)==(i/2)) selList.options[i/2].selected=true  

הפונקציה במלואה

function makeDymList(selectedID,currListNumber) {
    if(selectedID==0) selectedID=1;
    var list = arrList[currListNumber];
    var selList = document.getElementById("model");
	selList.options.length=0;
    for(var i=0;i<list.length;i+=2) {
        selList.options[i/2] = new Option(list[i],list[i+1]);
        if((selectedID-1)==(i/2)) selList.options[i/2].selected=true
    }
}  

קריאה לפונקציה

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

<body onload="makeDymList(0,0);">  

כמו שהסברתי למעלה, הערך הראשוני המתקבל הוא ערך ברירת המחדל שייבחר בתוך רשימת הדגמים והערך השני הוא הערך שקובע איזו רשימת דגמים להציג.

הקוד במלואו

<html>
<head>
<title>תיבות בחירה דינאמיות</title>
<script type="text/javascript">
var arrList = new Array();
arrList[0] = new Array('כל הדגמים','0');
arrList[1] = new Array('אקורד','1','סיוויק','2');
arrList[2] = new Array('קורולה','3','אוואלון','4','קאמרי','5','סליקה','6');
arrList[3] = new Array('פוקוס','7','פומה','8');
arrList[4] = new Array('מאליבו','9','בלייזר','10','אופטרה','11');

function makeDymList(selectedID,currListNumber) {
    if(selectedID==0) selectedID=1;
    var list = arrList[currListNumber];
    var selList = document.getElementById("model");
	selList.options.length=0;
    for(var i=0;i<list.length;i+=2) {
        selList.options[i/2] = new Option(list[i],list[i+1]);
        if((selectedID-1)==(i/2)) selList.options[i/2].selected=true
    }
}
</script>
</head>

<body onload="makeDymList(0,0);">

<select name="manufacturer" id="manufacturer" OnChange="makeDymList(0,this.value);">
 <option value="0">כל היצרנים</option>
 <option value="1">הונדה</option>
 <option value="2">טויוטה</option>
 <option value="3">פורד</option>
 <option value="4">שברולט</option>
</select>

<select name="model" id="model"></select>

</body>
</html>  

לחץ כאן להרצת הדוגמא

בחלק הבא של המאמר נלמד כיצד לשלב בתיבות הבחירה הדינאמיות מידע מתוך מסד נתונים קיים בעזרת ASP.