• הרשמה
    • התחברות
    • פוסטים אחרונים
    • תגיות
    • משתמשים
    • קבוצות

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

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

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

      תודה

      chv תגובה 1 תגובה אחרונה תגובה ציטוט 0
      • chv
        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>
        
        תגובה 1 תגובה אחרונה תגובה ציטוט 3
        • ד
          דוד יצחק נערך לאחרונה על ידי

          הבנתי.
          אבל כל אחד מה 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>
          

          אז ככה

          1. אני רוצה שכל ה div יהיו במקום אחת
          2. שבselect יהיה אפשרות ברירת מחדל ( כשהדף נטען בפעם הראשונה) משהוא כמו “בחר…”
          3. כמובן, כל ה div בברירת מחדל הם בגדר של “נטען ואינו נראה”
          4. אם תוכל בבקשה להשלים את ה js

          תודה!!

          ב 2 תגובות תגובה אחרונה תגובה ציטוט 0
          • ב
            ברוך תכנות @דוד יצחק נערך לאחרונה על ידי ברוך

            @דוד-יצחק

            <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>
            
            ד תגובה 1 תגובה אחרונה תגובה ציטוט 2
            • ב
              ברוך תכנות @דוד יצחק נערך לאחרונה על ידי

              @דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:

              שבselect יהיה אפשרות ברירת מחדל ( כשהדף נטען בפעם הראשונה) משהוא כמו “בחר…”

              צריך להכניס מאפיין selected

              <option value="" selected></option>
              
              תגובה 1 תגובה אחרונה תגובה ציטוט 1
              • ד
                דוד יצחק @ברוך נערך לאחרונה על ידי

                @ברוך אתה בטוח שהקוד נכון? זהלא עובד.
                ה div לא מוצג בכלל

                ב תגובה 1 תגובה אחרונה תגובה ציטוט 0
                • ב
                  ברוך תכנות @דוד יצחק נערך לאחרונה על ידי ברוך

                  @דוד-יצחק
                  כנראה יש לך איזה טעות קטנה
                  בדקת שגם אצלך ה-value של ה-select מקביל לid של ה-div?
                  אולי תשתף פה את הקוד שלך

                  ד תגובה 1 תגובה אחרונה תגובה ציטוט 0
                  • ד
                    דוד יצחק @ברוך נערך לאחרונה על ידי

                    @ברוך אמר בשאלה | הצגת div כשה select משתנה:

                    @דוד-יצחק
                    כנראה יש לך איזה טעות קטנה
                    בדקת שגם אצלך ה-value של ה-select מקביל לid של ה-div?
                    אולי תשתף פה את הקוד שלך

                    דבר ראשון ניסיתי את הקוד שלך וזה לא עובד…

                    ב תגובה 1 תגובה אחרונה תגובה ציטוט 0
                    • ב
                      ברוך תכנות @דוד יצחק נערך לאחרונה על ידי

                      @דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:

                      דבר ראשון ניסיתי את הקוד שלך וזה לא עובד…

                      העתקת ולא הגדרת אצלך את שמות הid והvlue ???
                      אתה יודע בכלל טיפה j.s ???

                      Men770 תגובה 1 תגובה אחרונה תגובה ציטוט 0
                      • Men770
                        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.

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

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

                        תגובה 1 תגובה אחרונה תגובה ציטוט 2
                        • ד
                          דוד יצחק נערך לאחרונה על ידי

                          <!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>
                          
                          ב ד 2 תגובות תגובה אחרונה תגובה ציטוט 1
                          • ב
                            ברוך תכנות @דוד יצחק נערך לאחרונה על ידי

                            @דוד-יצחק

                            <!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>
                            
                            תגובה 1 תגובה אחרונה תגובה ציטוט 2
                            • ד
                              דוד יצחק נערך לאחרונה על ידי

                              זה לא עובד

                              ב תגובה 1 תגובה אחרונה תגובה ציטוט 0
                              • ב
                                ברוך תכנות @דוד יצחק נערך לאחרונה על ידי

                                @דוד-יצחק אמר בשאלה | הצגת div כשה select משתנה:

                                זה לא עובד

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

                                תגובה 1 תגובה אחרונה תגובה ציטוט 0
                                • ד
                                  דוד יצחק @דוד יצחק נערך לאחרונה על ידי

                                  @דוד-יצחק אמר בשאלה | הצגת 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>
                                  
                                  ב תגובה 1 תגובה אחרונה תגובה ציטוט 0
                                  • ב
                                    ברוך תכנות @דוד יצחק נערך לאחרונה על ידי

                                    @דוד-יצחק
                                    אתה משנה דברים…
                                    אל תשנה בלי שאתה יודע קצת 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>
                                    
                                    תגובה 1 תגובה אחרונה תגובה ציטוט 1
                                    • פוסט ראשון
                                      פוסט אחרון