Prieš pradedant kurti išskleidžiamąjį sąrašą, svarbu žinoti, kas yra išskleidžiamasis sąrašas. Išskleidžiamasis sąrašas yra perjungiamas meniu, leidžiantis vartotojui pasirinkti vieną iš kelių. Šio sąrašo parinktys yra apibrėžtos kodavimu, kuris yra susietas su funkcija. Spustelėjus arba pasirinkus šią parinktį, ta funkcija suaktyvinama ir pradedama veikti.
Dažniausiai registracijos formose matėte išskleidžiamąjį sąrašą, kad išskleidžiamajame meniu pasirinkite valstiją ar miestą. Išskleidžiamajame sąraše galime pasirinkti tik vieną iš elementų sąrašo. Žiūrėkite žemiau esančią ekrano kopiją, kaip atrodo išskleidžiamasis sąrašas -
Svarbūs punktai kuriant išskleidžiamąjį sąrašą
- Skirtukas naudojamas kartu su skirtuku, kad būtų sukurtas paprastas HTML išskleidžiamasis sąrašas. Po to JavaScript padeda atlikti operaciją su šiuo sąrašu.
- Išskyrus tai, galite naudoti konteinerio skirtuką, kad sukurtumėte išskleidžiamąjį sąrašą. Įtraukite jame esančius išskleidžiamuosius elementus ir nuorodas. Šiame skyriuje aptarsime kiekvieną metodą pateikdami pavyzdį.
- Galite naudoti bet kokį elementą, pvz. , arba
norėdami atidaryti išskleidžiamąjį meniu.
Norėdami sukurti išskleidžiamąjį sąrašą naudodami skirtingus metodus, žr. toliau pateiktus pavyzdžius.
Pavyzdžiai
Paprastas išskleidžiamasis sąrašas naudojant skirtuką
Tai paprastas pavyzdys, kaip sukurti paprastą ir lengvą išskleidžiamąjį sąrašą nenaudojant jokių sudėtingų dalykų JavaScript kodas ir CSS stiliaus lapas.
Kopijuoti kodą
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> Išbandykite dabar Išvestis
Vykdydami aukščiau pateiktą kodą gausite tokį patį atsakymą, kaip ir pateiktoje ekrano kopijoje. Jame bus išskleidžiamasis meniu su mokymo svetainių sąrašu.
kitaip jei bash
Išskleidžiamajame sąraše pasirinkite vieną elementą spustelėdami jį.
Žemiau esančioje ekrano kopijoje žiūrėkite, kad pasirinktas elementas buvo rodomas išvesties lauke.
Išskleidžiamąjį sąrašą galima sukurti kitais būdais; žiūrėkite daugiau pavyzdžių žemiau.
Išskleidžiamasis sąrašas naudojant mygtuką ir skirtuką div
Šiame pavyzdyje mes sukursime išskleidžiamąjį sąrašą su mygtuku, kurio išskleidžiamasis meniu yra elementų sąrašas.
f filmai
Kopijuoti kodą
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> Išbandykite dabar Išvestis
Spustelėję šį išskleidžiamąjį mygtuką, gausite elementų sąrašą, kuriame turėsite pasirinkti vieną elementą iš to sąrašo. Žiūrėkite žemiau esančią ekrano kopiją:
Spustelėkite ant Pasirinkimu sarasas mygtuką ir paslėpti sąrašą.
Kelių išskleidžiamojo sąrašo pavyzdys
Aukščiau pateiktuose pavyzdžiuose sukūrėme vieną išskleidžiamąjį sąrašą. Dabar sukursime formą su keliais išskleidžiamaisiais įvairių internetinių techninių dalykų vadovėlių sąrašais, pvz., C , C++ , PHP , MySQL , ir Java , suskirstyti į kelias kategorijas. Kai vartotojas spustelėja tam tikrą išskleidžiamąjį mygtuką, jums atsidarys atitinkamas išskleidžiamasis sąrašas.
Žiūrėkite žemiau pateiktą pavyzdį, kaip tai padaryti:
.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;>