שאלה | הצגת div כשה select משתנה

דוד יצחק

היי
יש לי שאלה, (למי שעוד לא קלט את זה מהכותרת )
למשל יש לי 5 div בדף, כשבברירת מחדל אף אחת מהם אינם מוצגות (display:none) ויש לי תיבת בחירה (select) עם 6 options ואני רוצה שכשאני בוחר אפשרות מס’1 אז div מספר1 יוצג. וכך הלאה.
השאלה היא איך עושים בjs שזה יקרה…

תודה

chv

@דוד-יצחק הכי נכון **לשנות את הערך שנמצא ב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 ???

Men770

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

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>

שאלה | הצגת div כשה select משתנה

|- יחי אדוננו מורנו ורבינו מלך המשיח לעולם ועד! -|

|-יש לנו ב"ה אתר חדש, מוזמנים להיכנס.-|