לוגו האתר
    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Users
    • Groups

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

    HTML
    4
    16
    166
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • ד
      דוד יצחק last edited by דוד יצחק

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

      תודה

      chv 1 Reply Last reply Reply Quote 0
      • chv
        chv @דוד יצחק last edited by

        @דוד-יצחק הכי נכון **לשנות את הערך שנמצא ב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 Reply Last reply Reply Quote 3
        • ד
          דוד יצחק last edited by

          הבנתי.
          אבל כל אחד מה 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 Replies Last reply Reply Quote 0
          • ב
            ברוך תכנות @דוד יצחק last edited by ברוך

            @דוד-יצחק

            <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 Reply Last reply Reply Quote 2
            • ב
              ברוך תכנות @דוד יצחק last edited by

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

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

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

              <option value="" selected></option>
              
              1 Reply Last reply Reply Quote 1
              • ד
                דוד יצחק @ברוך last edited by

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

                ב 1 Reply Last reply Reply Quote 0
                • ב
                  ברוך תכנות @דוד יצחק last edited by ברוך

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

                  ד 1 Reply Last reply Reply Quote 0
                  • ד
                    דוד יצחק @ברוך last edited by

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

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

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

                    ב 1 Reply Last reply Reply Quote 0
                    • ב
                      ברוך תכנות @דוד יצחק last edited by

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

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

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

                      Men770 1 Reply Last reply Reply Quote 0
                      • Men770
                        Men770 מנהל ראשי מנהל תכנות @ברוך last edited by

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

                        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 Reply Last reply Reply Quote 2
                        • ד
                          דוד יצחק last edited by

                          <!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 Replies Last reply Reply Quote 1
                          • ב
                            ברוך תכנות @דוד יצחק last edited by

                            @דוד-יצחק

                            <!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 Reply Last reply Reply Quote 2
                            • ד
                              דוד יצחק last edited by

                              זה לא עובד

                              ב 1 Reply Last reply Reply Quote 0
                              • ב
                                ברוך תכנות @דוד יצחק last edited by

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

                                זה לא עובד

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

                                1 Reply Last reply Reply Quote 0
                                • ד
                                  דוד יצחק @דוד יצחק last edited by

                                  @דוד-יצחק אמר בשאלה | הצגת 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 Reply Last reply Reply Quote 0
                                  • ב
                                    ברוך תכנות @דוד יצחק last edited by

                                    @דוד-יצחק
                                    אתה משנה דברים…
                                    אל תשנה בלי שאתה יודע קצת 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 Reply Last reply Reply Quote 1
                                    • First post
                                      Last post
                                    חוקי הפורום