Pirms sākat izveidot nolaižamo sarakstu, ir svarīgi zināt, kas ir nolaižamais saraksts. Nolaižamais saraksts ir pārslēdzama izvēlne, kas ļauj lietotājam izvēlēties vienu no vairākām opcijām. Opcijas šajā sarakstā ir definētas kodējumā, kas ir saistīts ar funkciju. Noklikšķinot vai izvēloties šo opciju, šī funkcija tiek aktivizēta un sāk darboties.
Reģistrācijas veidlapās lielākoties esat redzējis nolaižamo sarakstu, lai nolaižamajā izvēlnē atlasītu valsti vai pilsētu. Nolaižamais saraksts ļauj mums izvēlēties tikai vienu no vienumu saraksta. Skatiet zemāk redzamo ekrānuzņēmumu, kā izskatās nolaižamais saraksts -
Svarīgi punkti, lai izveidotu nolaižamo sarakstu
- Cilne tiek izmantota kopā ar cilni, lai izveidotu vienkāršu nolaižamo sarakstu HTML. Pēc tam JavaScript palīdz veikt darbību ar šo sarakstu.
- Izņemot šo, varat izmantot konteinera cilni, lai izveidotu nolaižamo sarakstu. Pievienojiet tajā nolaižamos vienumus un saites. Mēs apspriedīsim katru metodi ar piemēru šajā nodaļā.
- Varat izmantot jebkuru elementu, piemēram, , vai
lai atvērtu nolaižamo izvēlni.
Skatiet tālāk sniegtos piemērus, lai izveidotu nolaižamo sarakstu, izmantojot dažādas metodes.
vienkārša python programma
Piemēri
Vienkāršs nolaižamais saraksts, izmantojot cilni
Tas ir vienkāršs piemērs vienkārša un vienkārša nolaižamā saraksta izveidei, neizmantojot sarežģītus JavaScript kods un CSS stila lapa.
Kopēt kodu
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> Izmēģiniet to tagad Izvade
Palaižot iepriekš minēto kodu, jūs saņemsit tādu pašu atbildi kā dotajā ekrānuzņēmumā. Tajā būs nolaižamā izvēlne ar apmācību vietņu sarakstu.
konvertēt datumu par virkni
Nolaižamajā sarakstā atlasiet vienu vienumu, noklikšķinot uz tā.
mantošanas programma python
Skatiet zemāk esošajā ekrānuzņēmumā, ka atlasītais vienums ir parādīts izvades laukā.
Nolaižamo sarakstu var izveidot, izmantojot dažus citus veidus; skatiet tālāk dažus piemērus.
Nolaižamais saraksts, izmantojot pogu un div cilni
Šajā piemērā mēs izveidosim nolaižamo sarakstu ar pogu, kuras nolaižamajā izvēlnē ir vienumu saraksts.
Kopēt kodu
lateksa teksta izmērs
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> Izmēģiniet to tagad Izvade
Noklikšķinot uz šīs nolaižamās pogas, jūs iegūsit to vienumu sarakstu, kuros jums ir jāizvēlas viens vienums no šī saraksta. Skatiet zemāk redzamo ekrānuzņēmumu:
Noklikšķiniet uz Izvēlnes saraksts pogu un paslēpt sarakstu.
Vairāku nolaižamo sarakstu piemērs
Iepriekš minētajos piemēros esam izveidojuši vienu nolaižamo sarakstu. Tagad mēs izveidosim veidlapu ar vairākām nolaižamajām izvēlnēm dažādu tiešsaistes tehnisko priekšmetu pamācību sarakstiem, piemēram C , C++ , PHP , MySQL , un Java , kas iedalītas vairākās kategorijās. Kad lietotājs noklikšķina uz noteiktas nolaižamās pogas, jums tiks atvērts attiecīgais nolaižamais saraksts.
Skatiet tālāk redzamo piemēru, kā to izdarīt:
.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;>