Prima di iniziare a creare un elenco a discesa, è importante sapere cos'è un elenco a discesa. Un elenco a discesa è un menu commutabile che consente all'utente di scegliere un'opzione tra più opzioni. Le opzioni in questo elenco sono definite nella codifica, che è associata a una funzione. Quando si fa clic o si sceglie questa opzione, la funzione si attiva e inizia a essere eseguita.
Hai visto un elenco a discesa la maggior parte delle volte sui moduli di registrazione per selezionare lo stato o la città dal menu a discesa. Un elenco a discesa ci consente di sceglierne solo uno dall'elenco degli elementi. Guarda lo screenshot qui sotto come appare l'elenco a discesa-
Punti importanti per creare un elenco a discesa
- La scheda viene utilizzata con la scheda per creare il semplice elenco a discesa in HTML. Successivamente JavaScript aiuta a eseguire operazioni con questo elenco.
- Oltre a ciò, puoi utilizzare la scheda Contenitore per creare l'elenco a discesa. Aggiungi gli elementi a discesa e i collegamenti al suo interno. Discuteremo ciascun metodo con un esempio in questo capitolo.
- Puoi utilizzare qualsiasi elemento come , , O
per aprire il menu a discesa.
Vedi gli esempi seguenti per creare un elenco a discesa utilizzando metodi diversi.
Esempi
Semplice elenco a discesa utilizzando la scheda
È un semplice esempio di creazione di un elenco a discesa semplice e facile senza utilizzare alcun complicato JavaScript codice e foglio di stile CSS.
Copia codice
variabile bash
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> Provalo adesso Produzione
Eseguendo il codice sopra, otterrai la risposta identica allo screenshot fornito. Conterrà un menu a discesa con un elenco di siti tutorial.
Selezionare un elemento dall'elenco a discesa facendo clic su di esso.
Vedi nello screenshot qui sotto che l'elemento selezionato è stato visualizzato nel campo di output.
È possibile creare un elenco a discesa utilizzando altri modi; vedere alcuni esempi più sotto.
come rimuovere il primo carattere in Excel
Elenco a discesa utilizzando il pulsante e la scheda div
In questo esempio, creeremo un elenco a discesa con un pulsante con un elenco di elementi come menu a discesa.
Copia codice
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> Provalo adesso Produzione
Facendo clic su questo pulsante a discesa, otterrai un elenco di elementi in cui devi selezionare un elemento da quell'elenco. Guarda lo screenshot qui sotto:
metodi dell'elenco Java
Clicca sul Menu `A tendina pulsante e nascondere l'elenco.
Elenco a discesa multiplo Esempio
Negli esempi precedenti, abbiamo creato un unico elenco a discesa. Creeremo ora un modulo con più menu a discesa di vari elenchi di tutorial di argomenti tecnici online come C , C++ , PHP , MySQL , E Giava , suddivisi in diverse categorie. Quando l'utente fa clic su un particolare pulsante a discesa, si aprirà il rispettivo elenco a discesa.
Vedi l'esempio seguente su come farlo:
.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;>