Voordat u begint met het maken van een vervolgkeuzelijst, is het belangrijk om te weten wat een vervolgkeuzelijst is. Een vervolgkeuzelijst is een schakelbaar menu waarmee de gebruiker één optie uit meerdere opties kan kiezen. De opties in deze lijst worden gedefinieerd in codering, die aan een functie is gekoppeld. Wanneer u op deze optie klikt of deze kiest, wordt die functie geactiveerd en begint deze te presteren.
Meestal heb je op registratieformulieren een vervolgkeuzelijst gezien waarin je de staat of stad uit het vervolgkeuzemenu kunt selecteren. Met een vervolgkeuzelijst kunnen we er slechts één uit de lijst met items kiezen. Zie de onderstaande schermafbeelding hoe de vervolgkeuzelijst eruit ziet:
Belangrijke punten om een vervolgkeuzelijst te maken
- Het tabblad wordt gebruikt met tabblad om de eenvoudige vervolgkeuzelijst in HTML te maken. Daarna helpt JavaScript om de bewerking met deze lijst uit te voeren.
- Daarnaast kunt u het tabblad Container gebruiken om de vervolgkeuzelijst te maken. Voeg de dropdown-items en links erin toe. In dit hoofdstuk bespreken we elke methode met een voorbeeld.
- U kunt elk element gebruiken, zoals , of
om het vervolgkeuzemenu te openen.
Zie de onderstaande voorbeelden om op verschillende manieren een vervolgkeuzelijst te maken.
string naar json-object
Voorbeelden
Eenvoudige vervolgkeuzelijst met behulp van tabblad
Het is een eenvoudig voorbeeld van het maken van een eenvoudige en gemakkelijke vervolgkeuzelijst zonder ingewikkelde handelingen JavaScript code en CSS-stylesheet.
Kopieer 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> Test het nu Uitvoer
Door de bovenstaande code uit te voeren, krijgt u hetzelfde antwoord als de gegeven schermafbeelding. Het bevat een vervolgkeuzemenu met een lijst met tutorialsites.
Selecteer een item uit de vervolgkeuzelijst door erop te klikken.
Zie in de onderstaande schermafbeelding dat het geselecteerde item in het uitvoerveld is weergegeven.
substringmethode java
Een vervolgkeuzelijst kan op een andere manier worden gemaakt; zie hieronder nog enkele voorbeelden.
Vervolgkeuzelijst met knop en div-tabblad
In dit voorbeeld maken we een vervolgkeuzelijst met een knop met een lijst met items als vervolgkeuzemenu.
Kopieer 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> Test het nu Uitvoer
Door op deze vervolgkeuzeknop te klikken, krijgt u een lijst met items waarin u één item uit die lijst moet selecteren. Zie de onderstaande schermafbeelding:
Klik op de Keuzelijst knop en verberg de lijst.
Meerdere vervolgkeuzelijsten Voorbeeld
In de bovenstaande voorbeelden hebben we één vervolgkeuzelijst gemaakt. We gaan nu een formulier maken met meerdere vervolgkeuzemenu's met verschillende online lijsten met technische onderwerpen, zoals C , C++ , PHP , MySQL , En Java , onderverdeeld in verschillende categorieën. Wanneer de gebruiker op een bepaalde vervolgkeuzeknop klikt, wordt de betreffende vervolgkeuzelijst voor u geopend.
Zie het onderstaande voorbeeld hoe u dit moet doen:
.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;>