Prije nego počnete stvarati padajući popis, važno je znati što je padajući popis. Padajući popis je izbornik koji se može mijenjati i omogućuje korisniku da odabere jednu opciju između više opcija. Opcije na ovom popisu definirane su kodiranjem koje je povezano s funkcijom. Kada kliknete ili odaberete ovu opciju, ta se funkcija pokreće i počinje raditi.
Većinu ste vremena vidjeli padajući popis na obrascima za registraciju za odabir države ili grada s padajućeg izbornika. Padajući popis omogućuje nam da odaberemo samo jednu s popisa stavki. Pogledajte snimak zaslona u nastavku kako padajući popis izgleda-
Važne točke za izradu padajućeg popisa
- Kartica se koristi s karticom za stvaranje jednostavnog padajućeg popisa u HTML-u. Nakon toga JavaScript pomaže u izvođenju operacije s ovim popisom.
- Osim ovoga, možete koristiti karticu spremnika za izradu padajućeg popisa. Dodajte stavke padajućeg izbornika i veze unutar njega. U ovom poglavlju razmotrit ćemo svaku metodu s primjerom.
- Možete koristiti bilo koji element kao što su, , ili
za otvaranje padajućeg izbornika.
Pogledajte donje primjere za izradu padajućeg popisa koristeći različite metode.
tcp i ip model
Primjeri
Jednostavan padajući popis pomoću kartice
To je jednostavan primjer stvaranja jednostavnog i lakog padajućeg popisa bez korištenja bilo čega kompliciranog JavaScript kod i CSS stylesheet.
Kopiraj kod
tigar u usporedbi s lavom
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> Testirajte sada Izlaz
Pokretanjem gornjeg koda, dobit ćete odgovor isti kao na danoj snimci zaslona. Sadržat će padajući izbornik s popisom web stranica s podukama.
Odaberite jednu stavku s padajućeg popisa klikom na nju.
lokalni datum
Na donjoj snimci zaslona vidite da je odabrana stavka prikazana u polju za ispis.
Padajući popis može se stvoriti na neke druge načine; pogledajte još neke primjere u nastavku.
Padajući popis pomoću gumba i kartice div
U ovom primjeru stvorit ćemo padajući popis s gumbom koji ima popis stavki kao padajući izbornik.
Kopiraj 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> Testirajte sada Izlaz
Klikom na ovaj padajući gumb dobit ćete popis stavki u kojem morate odabrati jednu stavku s tog popisa. Pogledajte snimak zaslona u nastavku:
temeljna java pitanja za intervju
Klikni na Padajući popis i sakrijte popis.
Primjer višestrukog padajućeg popisa
U gornjim primjerima stvorili smo jedan padajući popis. Sada ćemo izraditi obrazac s višestrukim padajućim izbornikom s popisima raznih online udžbenika za tehničke predmete poput C , C++ , PHP , MySQL , i Java , kategorizirani u nekoliko kategorija. Kada korisnik klikne na određeni padajući gumb, otvorit će vam se odgovarajući padajući popis.
Pogledajte primjer u nastavku kako to učiniti:
.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;>