Bir açılır liste oluşturmaya başlamadan önce, açılır listenin ne olduğunu bilmek önemlidir. Açılır liste, kullanıcının birden fazla seçenek arasından bir seçenek seçmesine olanak tanıyan, değiştirilebilir bir menüdür. Bu listedeki seçenekler bir fonksiyonla ilişkilendirilen kodlamada tanımlanır. Bu seçeneğe tıkladığınızda veya seçtiğinizde, söz konusu işlev tetiklenir ve çalışmaya başlar.
Kayıt formlarında çoğu zaman açılır menüden eyalet veya şehir seçmek için bir açılır liste görmüşsünüzdür. Açılır liste, öğeler listesinden yalnızca birini seçmemize olanak tanır. Aşağıdaki ekran görüntüsüne bakın, açılır listenin nasıl göründüğüne bakın.
Açılır liste oluşturmak için önemli noktalar
- Sekme, HTML'de basit açılır liste oluşturmak için sekmeyle birlikte kullanılır. Bundan sonra JavaScript bu listeyle işlem yapılmasına yardımcı olur.
- Bunun dışında açılır listeyi oluşturmak için kapsayıcı sekmesini kullanabilirsiniz. Açılır öğeleri ve bağlantıları içine ekleyin. Bu bölümde her yöntemi bir örnekle tartışacağız.
- , gibi herhangi bir öğeyi kullanabilirsiniz. , veya
Açılır menüyü açmak için.
Farklı yöntemler kullanarak açılır liste oluşturmak için aşağıdaki örneklere bakın.
Örnekler
Sekmeyi kullanan basit açılır liste
Karmaşık yöntemler kullanmadan basit ve kolay bir açılır liste oluşturmanın basit bir örneğidir. JavaScript kod ve CSS stil sayfası.
Kodu Kopyala
Java'da faktöriyel
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> Şimdi Test Edin Çıktı
Yukarıdaki kodu çalıştırdığınızda, verilen ekran görüntüsüyle aynı yanıtı alacaksınız. Eğitim sitelerinin listesini içeren bir açılır menü içerecektir.
yoksa bash
Açılır listeden üzerine tıklayarak bir öğe seçin.
Aşağıdaki ekran görüntüsünde seçilen öğenin çıktı alanında görüntülendiğini görün.
Bir açılır liste başka yollar kullanılarak da oluşturulabilir; aşağıdaki örneklere bakın.
Düğme ve div sekmesini kullanan açılır liste
Bu örnekte, açılır menü olarak öğelerin listesini içeren bir düğme içeren bir açılır liste oluşturacağız.
Kodu Kopyala
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> Şimdi Test Edin Çıktı
Bu açılır düğmeye tıkladığınızda, o listeden bir öğe seçmeniz gereken öğelerin bir listesini alırsınız. Aşağıdaki ekran görüntüsüne bakın:
java karşılaştırma yöntemi
Tıkla Açılır liste düğmesine basın ve listeyi gizleyin.
Çoklu açılır liste örneği
Yukarıdaki örneklerde tek bir açılır liste oluşturduk. Şimdi aşağıdakiler gibi çeşitli çevrimiçi teknik konu eğitimleri listelerinin birden fazla açılır menüsüne sahip bir form oluşturacağız: C , C++ , PHP , MySQL , Ve Java , çeşitli kategorilere ayrılmıştır. Kullanıcı belirli bir açılır düğmeye tıkladığında, ilgili açılır liste karşınıza açılacaktır.
Bunun nasıl yapılacağı aşağıdaki örneğe bakın:
.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;>