Avant de commencer à créer une liste déroulante, il est important de savoir ce qu'est une liste déroulante. Une liste déroulante est un menu déroulant qui permet à l'utilisateur de choisir une option parmi plusieurs. Les options de cette liste sont définies dans le codage associé à une fonction. Lorsque vous cliquez ou choisissez cette option, cette fonction se déclenche et commence à s'exécuter.
Vous avez vu la plupart du temps une liste déroulante sur les formulaires d'inscription pour sélectionner l'état ou la ville dans le menu déroulant. Une liste déroulante nous permet d'en choisir un seul dans la liste des éléments. Voir la capture d'écran ci-dessous à quoi ressemble la liste déroulante :
Points importants pour créer une liste déroulante
- L'onglet est utilisé avec tab pour créer la liste déroulante simple en HTML. Après cela, JavaScript aide à effectuer des opérations avec cette liste.
- En dehors de cela, vous pouvez utiliser l'onglet Conteneur pour créer la liste déroulante. Ajoutez les éléments de la liste déroulante et les liens à l'intérieur. Nous discuterons de chaque méthode avec un exemple dans ce chapitre.
- Vous pouvez utiliser n'importe quel élément tel que , , ou
pour ouvrir le menu déroulant.
Consultez les exemples ci-dessous pour créer une liste déroulante en utilisant différentes méthodes.
Exemples
Liste déroulante simple utilisant l'onglet
Il s'agit d'un exemple simple de création d'une liste déroulante simple et facile sans utiliser d'éléments compliqués. Javascript code et feuille de style CSS.
Copier le code
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> Testez-le maintenant Sortir
En exécutant le code ci-dessus, vous obtiendrez la même réponse que la capture d'écran donnée. Il contiendra un menu déroulant contenant une liste de sites de didacticiels.
Sélectionnez un élément dans la liste déroulante en cliquant dessus.
Voyez dans la capture d'écran ci-dessous que l'élément sélectionné a été affiché dans le champ de sortie.
Une liste déroulante peut être créée d'autres manières ; voir quelques autres exemples ci-dessous.
Liste déroulante utilisant le bouton et l'onglet div
Dans cet exemple, nous allons créer une liste déroulante avec un bouton ayant une liste d'éléments comme menu déroulant.
c nombre aléatoire
Copier le code
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> Testez-le maintenant Sortir
En cliquant sur ce bouton déroulant, vous obtiendrez une liste d'éléments dans laquelle vous devrez sélectionner un élément de cette liste. Voir la capture d'écran ci-dessous:
Clique sur le La liste déroulante et masquer la liste.
Exemple de liste déroulante multiple
Dans les exemples ci-dessus, nous avons créé une seule liste déroulante. Nous allons maintenant créer un formulaire avec plusieurs menus déroulants de diverses listes de didacticiels sur des sujets techniques en ligne comme C , C++ , PHP , MySQL , et Java , classés en plusieurs catégories. Lorsque l'utilisateur clique sur un bouton déroulant particulier, sa liste déroulante respective s'ouvrira à vous.
Voir l'exemple ci-dessous pour savoir comment procéder :
.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;>