Înainte de a începe crearea unei liste derulante, este important să știți ce este o listă derulantă. O listă derulantă este un meniu care poate fi comutat, care permite utilizatorului să aleagă o opțiune din mai multe. Opțiunile din această listă sunt definite în codificare, care este asociată cu o funcție. Când faceți clic sau alegeți această opțiune, acea funcție se declanșează și începe să funcționeze.
Ați văzut o listă drop-down de cele mai multe ori pe formularele de înregistrare pentru a selecta statul sau orașul din meniul drop-down. O listă derulantă ne permite să alegem doar unul din lista de articole. Vedeți captura de ecran de mai jos cum arată lista derulantă-
Puncte importante pentru a crea o listă derulantă
- Fila este folosită cu tab pentru a crea o listă derulantă simplă în HTML. După aceea, JavaScript ajută la efectuarea operațiunilor cu această listă.
- În afară de aceasta, puteți utiliza fila container pentru a crea lista drop-down. Adăugați elementele derulante și linkurile în interiorul acestuia. Vom discuta fiecare metodă cu un exemplu în acest capitol.
- Puteți folosi orice element, cum ar fi, , sau
pentru a deschide meniul drop-down.
Consultați exemplele de mai jos pentru a crea o listă derulantă folosind diferite metode.
Exemple
Listă derulantă simplă folosind tab
Este un exemplu simplu de creare a unei liste derulante simple și ușoare, fără a utiliza niciun fel de complicat JavaScript cod și foaia de stil CSS.
Copiați codul
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> Testează-l acum Ieșire
Prin rularea codului de mai sus, veți obține răspunsul la fel ca și captura de ecran dată. Acesta va conține un meniu derulant cu o listă de site-uri de tutoriale.
Selectați un articol din lista derulantă făcând clic pe el.
Vedeți în captura de ecran de mai jos că elementul selectat a fost afișat în câmpul de ieșire.
eliminând ultimul comit git
O listă derulantă poate fi creată folosind alte moduri; vezi mai jos câteva exemple.
Lista derulantă folosind butonul și fila div
În acest exemplu, vom crea o listă derulantă cu un buton care are o listă de articole ca meniu derulant.
Copiați codul
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> Testează-l acum Ieșire
Făcând clic pe acest buton derulant, veți obține o listă de articole în care trebuie să selectați un articol din acea listă. Vedeți captura de ecran de mai jos:
Faceți clic pe Lista verticală butonul și ascundeți lista.
Lista derulantă multiplă Exemplu
În exemplele de mai sus, am creat o singură listă derulantă. Vom crea acum un formular cu mai multe meniu derulant cu diverse liste de tutoriale online cu subiecte tehnice, cum ar fi C , C++ , PHP , MySQL , și Java , clasificate în mai multe categorii. Când utilizatorul face clic pe un anumit buton derulant, lista derulantă respectivă se va deschide pentru dvs.
Vezi exemplul de mai jos cum să faci asta:
.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;>