שאלה | הצגת div כשה select משתנה
-
היי
יש לי שאלה, (למי שעוד לא קלט את זה מהכותרת)
למשל יש לי 5 div בדף, כשבברירת מחדל אף אחת מהם אינם מוצגות(display:none)
ויש לי תיבת בחירה(select)
עם 6options
ואני רוצה שכשאני בוחר אפשרות מס’1 אז div מספר1 יוצג. וכך הלאה.
השאלה היא איך עושים בjs שזה יקרה…תודה
-
@דוד-יצחק הכי נכון **לשנות את הערך שנמצא בdiv אחד בלבד.
שכל פעם שבוחרים בselect - ישתנה הערך הפנימי (מה שנקרא innerHTML) של ה-div.
ככה זה נראה ב-JS:<body> <select onchange="show(this)"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> <div id="selected"></div> <script> function show(val) { document.getElementById('selected').innerHTML = val.value; } </script> </body>
-
הבנתי.
אבל כל אחד מה div הוא טבלה שלמה, אז לענייות דעתי יותר קל עם div נפרדים…
בכל מקרה יש לי קוד בסיסי לזה, אם אתה יכול להשלים את זה…<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>כותרת</title> </head> <body> <select onchange="myf()"> <option>בחר...</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div id="1"> מספר 1 </div> <div id="2> מספר 2 </div> <div id="3>מספר 3 </div> <script> myf() //איך ממשיכים מפה? </script> </body> </html>
אז ככה
- אני רוצה שכל ה div יהיו במקום אחת
- שבselect יהיה אפשרות ברירת מחדל ( כשהדף נטען בפעם הראשונה) משהוא כמו “בחר…”
- כמובן, כל ה div בברירת מחדל הם בגדר של “נטען ואינו נראה”
- אם תוכל בבקשה להשלים את ה js
תודה!!
-
<style> div{ display: none; } </style> </head> <body> <select onchange="displayDiv()"> <option value="div1">1</option> <option value="div2">2</option> <option value="div3">3</option> <option value="div4">4</option> <option value="div5">5</option> </select> <div id="div1">אחד</div> <div id="div2">שתים</div> <div id="div3">שלוש</div> <div id='div4'>ארבע</div> <div id='div5'>חמש</div> <script> function displayDiv(){ let divs =document.querySelectorAll('div') let select = document.querySelector('select').value divs.forEach(div => { if (div.id === select){ div.style.display='block' } }); } </script> </body>
-
@דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:
שבselect יהיה אפשרות ברירת מחדל ( כשהדף נטען בפעם הראשונה) משהוא כמו “בחר…”
צריך להכניס מאפיין selected
<option value="" selected></option>
-
@ברוך אתה בטוח שהקוד נכון? זהלא עובד.
ה div לא מוצג בכלל -
@דוד-יצחק
כנראה יש לך איזה טעות קטנה
בדקת שגם אצלך ה-value של ה-select מקביל לid של ה-div?
אולי תשתף פה את הקוד שלך -
@ברוך אמר בשאלה | הצגת div כשה select משתנה:
@דוד-יצחק
כנראה יש לך איזה טעות קטנה
בדקת שגם אצלך ה-value של ה-select מקביל לid של ה-div?
אולי תשתף פה את הקוד שלךדבר ראשון ניסיתי את הקוד שלך וזה לא עובד…
-
@דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:
דבר ראשון ניסיתי את הקוד שלך וזה לא עובד…
העתקת ולא הגדרת אצלך את שמות הid והvlue ???
אתה יודע בכלל טיפה j.s ??? -
@ברוך לא בדקתי, אבל לפי הסקריפט יש לך באג קטן…
כשבוחרים פעם שנייה זה לא יחליף, אלא יוסיף.
תיקון:function displayDiv(){ let divs = document.querySelectorAll('div.switchView') let select = document.querySelector('select').value divs.forEach(div => { if (div.id === select){ div.style.display='block' } else { div.style.display = 'none' }); }
(צריך לתת לכל הdivים את הclass switchView.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>.:Title of page:.</title> </head> <body> <script> function displayDiv() { ll('div.switchView') Selector('select').value divs.forEach(div => { if (div.id === select){ iv.style.display='block' } else { iv.style.display = 'none ;) }} </script> <select onchange="displayDiv()" id="select"> <option value="" selected>בחר תאריך...</option> <option value="01">01</option> </select> <div id="01" style="display:none"> <table dir="rtl" border="2" class="table"> <tr><th colspan="6"><h2 class="h2"> רשימת הספרים הנלקחים מהספרייה </h2></th></tr> <tr> <th></th> <th>שם</th> <th>תאריך</th> <th>ספרים</th> <th>הוחזר</th> <th>מספר טלפון</th> </tr> </table> </div> </body> </html>
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>.:Title of page:.</title> </head> <style> div{ display: none; } </style> <body> <select onchange="displayDiv()" id="select"> <option value="" selected>בחר תאריך...</option> <option value="01">01</option> <option value="02">02</option> </select> <div id="01" > <h1>זה דיב ראשון</h1> <table dir="rtl" border="2" class="table"> <tr><th colspan="6"><h2 class="h2"> רשימת הספרים הנלקחים מהספרייה </h2></th></tr> <tr> <th></th> <th>שם</th> <th>תאריך</th> <th>ספרים</th> <th>הוחזר</th> <th>מספר טלפון</th> </tr> </table> </div> <div id="02"><h1>זה דיב שני</h1></div> <script> function displayDiv() { let divs = document.querySelectorAll('div') let select = document.querySelector('select').value divs.forEach(div => { if (div.id === select){ div.style.display='block' } else { div.style.display = 'none' } }) } </script> </body> </html>
-
זה לא עובד
-
@דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:
זה לא עובד
אם תעתיק את כל מה שכתבתי לעיל העתק הדבק תראה שהכל עובד מצוין
אלא מה אתה מנסה איכשהו לערבב את זה עם הhtml שלך ופה יש לך כנראה איזה טעות קטנה
תוכל לשתף את הקוד שלך כאן או להיעזר בחבר שיודע טיפה j.s -
@דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>.:Title of page:.</title> </head> <body> <script> function displayDiv() { ll('div.switchView') Selector('select').value divs.forEach(div => { if (div.id === select){ iv.style.display='block' } else { iv.style.display = 'none ;) }} </script> <select onchange="displayDiv()" id="select"> <option value="" selected>בחר תאריך...</option> <option value="01">01</option> </select> <div id="01" style="display:none"> <table dir="rtl" border="2" class="table"> <tr><th colspan="6"><h2 class="h2"> רשימת הספרים הנלקחים מהספרייה </h2></th></tr> <tr> <th></th> <th>שם</th> <th>תאריך</th> <th>ספרים</th> <th>הוחזר</th> <th>מספר טלפון</th> </tr> </table> </div> </body> </html>
-
@דוד-יצחק
אתה משנה דברים…
אל תשנה בלי שאתה יודע קצת j.s
אפשר להתחיל ללמוד…
שולח לך קוד תקין אם תעשה העתק הדבק-זה יעבוד.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <title>.:Title of page:.</title> <style> div{ display: none; } </style> </head> <body> <select onchange="displayDiv()" id="select"> <option value="" selected>בחר תאריך...</option> <option value="01">01</option> <option value="02">02</option> </select> <div id="01"> <table dir="rtl" border="2" class="table"> <tr><th colspan="6"><h2 class="h2"> רשימת הספרים הנלקחים מהספרייה </h2></th></tr> <tr> <th></th> <th>שם</th> <th>תאריך</th> <th>ספרים</th> <th>הוחזר</th> <th>מספר טלפון</th> </tr> </table> </div> <div id = '02'> 2 זה דיב מספר </div> <script> function displayDiv() { let divs = document.querySelectorAll('div') let select = document.querySelector('#select').value divs.forEach(div => { if (div.id === select){ div.style.display='block' } else { div.style.display = 'none' } }) } </script> </body> </html>