לפני שמתחילים ליצור רשימה נפתחת, חשוב לדעת מהי רשימה נפתחת. רשימה נפתחת היא תפריט שניתן להחלפה המאפשר למשתמש לבחור אפשרות אחת מתוך מספר אפשרויות. האפשרויות ברשימה זו מוגדרות בקידוד, המשויך לפונקציה. כאשר אתה לוחץ או בוחר באפשרות זו, פונקציה זו מופעלת ומתחילה לפעול.
ראית רשימה נפתחת רוב הזמן בטפסי הרשמה לבחירת המדינה או העיר מהתפריט הנפתח. רשימה נפתחת מאפשרת לנו לבחור רק אחד מרשימת הפריטים. ראה את צילום המסך למטה כיצד נראית הרשימה הנפתחת-
תוכנית פיתון פשוטה
נקודות חשובות ליצירת רשימה נפתחת
- הכרטיסייה משמשת עם tab ליצירת הרשימה הנפתחת הפשוטה ב-HTML. לאחר מכן JavaScript עוזר לבצע פעולה עם רשימה זו.
- מלבד זאת, אתה יכול להשתמש בלשונית המכולה כדי ליצור את הרשימה הנפתחת. הוסף את הפריטים הנפתחים והקישורים בתוכו. נדון בכל שיטה עם דוגמה בפרק זה.
- אתה יכול להשתמש בכל רכיב כגון, , או
כדי לפתוח את התפריט הנפתח.
ראה את הדוגמאות שלהלן כדי ליצור רשימה נפתחת בשיטות שונות.
דוגמאות
רשימה נפתחת פשוטה באמצעות כרטיסייה
זוהי דוגמה פשוטה ליצירת רשימה נפתחת פשוטה וקלה ללא שימוש מסובך JavaScript קוד וגיליון סגנונות CSS.
העתק קוד
dropdown menu using select tab function favTutorial() { var mylist = document.getElementById('myList'); document.getElementById('favourite').value = mylist.options[mylist.selectedIndex].text; } <b> Select you favourite tutorial site using dropdown list </b> ---Choose tutorial--- w3schools Javatpoint tutorialspoint geeksforgeeks <p> Your selected tutorial site is: <input type="text" id="favourite" size="20" < p> </p> בדוק את זה עכשיו תְפוּקָה
על ידי הפעלת הקוד לעיל, תקבל את התגובה זהה לצילום המסך הנתון. הוא יכיל תפריט נפתח הכולל רשימה של אתרי הדרכה.
בחר פריט אחד מהרשימה הנפתחת על ידי לחיצה עליו.
ראה בצילום המסך שלהלן שהפריט שנבחר הוצג בשדה הפלט.
ניתן ליצור רשימה נפתחת באמצעות דרכים אחרות; ראה עוד כמה דוגמאות למטה.
רשימה נפתחת באמצעות כפתור וכרטיסיית div
בדוגמה זו, ניצור רשימה נפתחת עם כפתור עם רשימה של פריטים כתפריט נפתח.
העתק קוד
dropdown menu using button /* set the position of dropdown */ .dropdown { position: relative; display: inline-block; } /* set the size and position of button on web */ .button { padding: 10px 30px; font-size: 15px; } /* provide css to background of list items */ #list-items { display: none; position: absolute; background-color: white; min-width: 185px; } /* provide css to list items */ #list-items a { display: block; font-size: 18px; background-color: #ddd; color: black; text-decoration: none; padding: 10px; } //show and hide dropdown list item on button click function show_hide() { var click = document.getElementById('list-items'); if(click.style.display ==='none') { click.style.display ='block'; } else { click.style.display ='none'; } } Choose Language <a href="#"> Hindi </a> <a href="#"> English </a> <a href="#"> Spanish </a> <a href="#"> Chinese </a> <a href="#"> Japanese </a> בדוק את זה עכשיו תְפוּקָה
בלחיצה על כפתור נפתח זה, תקבל רשימה של פריטים שבהם עליך לבחור פריט אחד מאותה רשימה. ראה את צילום המסך למטה:
הקלק על ה רשימה נפתחת לחצן ולהסתיר את הרשימה.
רשימה נפתחת מרובה דוגמה
בדוגמאות לעיל, יצרנו רשימה נפתחת אחת. כעת ניצור טופס עם מספר תפריטים נפתחים של רשימות מדריכים מקוונים בנושאים טכניים שונים כמו ג , C++ , PHP , MySQL , ו Java , מסווג למספר קטגוריות. כאשר המשתמש לוחץ על כפתור נפתח מסוים, הרשימה הנפתחת שלו תיפתח בפניך.
ראה את הדוגמה הבאה כיצד לעשות זאת:
יישומי מחשוב ענן
.dropbtn { background-color: green; color: white; padding: 14px; font-size: 16px; cursor: pointer; } .dropbtn:hover { background-color: brown; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; background-color: white; min-width: 140px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropdown a:hover { background-color: #ddd; } .show { display: block; } <h2>List of tutorials using Dropdown menu</h2> <p>Click on the button to open the tutorial dropdown menu.</p> Programming <a href="#java">Java</a> <a href="#python">Python</a> <a href="#c++">C++</a> <a href="#c">C</a> Database <a href="#mysql">MySQL</a> <a href="#mdb">MongoDB</a> <a href="#cass">Cassandra</a> Web Technology <a href="#php">PHP</a> <a href="#css">CSS</a> <a href="#js">JavaScript</a> /* methods to hide and show the dropdown content */ function programmingList() { document.getElementById('myDropdown1').classList.toggle('show'); } function databaseList() { document.getElementById('myDropdown2').classList.toggle('show'); } function WebTechList() { document.getElementById('myDropdown3').classList.toggle('show'); } /* methods to redirect to tutorial page that user will select from dropdown list */ function java() { window.location.replace('https://www.javatpoint.com/java-tutorial'); } function python() { window.location.replace('https://www.javatpoint.com/python-tutorial'); } function cpp() { window.location.replace('https://www.javatpoint.com/cpp-tutorial'); } function c() { window.location.replace('https://www.javatpoint.com/c-programming-language-tutorial'); } function mysql() { window.location.replace('https://www.javatpoint.com/mysql-tutorial'); } function mDB() { window.location.replace('https://www.javatpoint.com/mongodb-tutorial'); } function cassandra() { window.location.replace('https://www.javatpoint.com/cassandra-tutorial'); } function php() { window.location.replace('https://www.javatpoint.com/php-tutorial'); } function css() { window.location.replace('https://www.javatpoint.com/css-tutorial'); } function js() { window.location.replace('https://www.javatpoint.com/javascript-tutorial'); } // Close the dropdown menu if the user clicks outside of it window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName('dropdown-content'); var i; for (i = 0; i <dropdowns.length; i++) { var opendropdown="dropdowns[i];" if (opendropdown.classlist.contains('show')) opendropdown.classlist.remove('show'); } < pre> <span> Test it Now </span> <p> <strong>Output</strong> </p> <p>On executing the above code, a form with three dropdown buttons will appear. Each dropdown button has a list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-5.webp" alt="How to create dropdown list using JavaScript"> <p>Click on any of the dropdown button to see the list of items.</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-6.webp" alt="How to create dropdown list using JavaScript"> <p>Let you click on MongoDB under database tutorial, it will redirect you to our javatpoint MongoDB tutorial . See the output below:</p> <img src="//techcodeview.com/img/javascript-tutorial/55/how-create-dropdown-list-using-javascript-7.webp" alt="How to create dropdown list using JavaScript"> <h4>Note: if you click outside the dropdown window, the dropdown list will be disappeared.</h4> <p>Usually, a dropdown menu is created to categories the items of the same type. Means the list of similar type of items. It is much similar to the tutorial website, which has several lists of our javatpoint subject tutorials.</p> <hr></dropdowns.length;>