Senarai lungsur turun dalam HTML ialah elemen penting untuk tujuan pembinaan borang atau untuk menunjukkan senarai pilihan yang pengguna boleh memilih satu atau berbilang nilai. Senarai pilihan dalam HTML ini dikenali sebagai senarai Dropdown. Ia dibuat menggunakan
Mari lihat bagaimana senarai Jatuh turun akan dibuat:
Sintaks:
<select> <option value="">option1</option> <option value="">option2</option> <option value="">option3</option> <option value="">option3</option> </select>
Contoh:
<select name="color"> <option value="red">Red</option> <option value="purple">Purple </option> </select>
Seperti yang ditunjukkan dalam sintaks di atas , ialah teg yang digunakan untuk membuat senarai Jatuh turun.
Menetapkan warna atau warna latar belakang kepada tuding dengan menggunakan kod:
.dropdown a:hover{
Background-color: color_name;
}Kedudukan untuk senarai lungsur turun ditakrifkan kepada dua nilai: kedudukan: saudara yang digunakan untuk memaparkan kandungan senarai betul-betul di bawah butang senarai pilih. Dengan bantuan kedudukan: mutlak;
Lebar min ialah salah satu sifat yang digunakan untuk memberikan lebar tertentu pada senarai Jatuh Bawah. Kita boleh menetapkannya selagi butang lungsur turun dengan menetapkan lebar kepada 100%. Sintaks di atas ditakrifkan untuk pemilihan atribut tunggal; sekarang, kita akan melihat bagaimana berbilang pilihan akan dipilih daripada senarai item.
Sintaks:
<select multiple> <option value="">option1</option> <option value="">option2</option> </select>
Contoh:
<select name="subject" multiple> <option value="math">Math</option> <option value="english">English</option> <option value="science">Science</option> <option value="biology">Biology</option> </select>
Selepas mengkaji sintaks sekarang, kita akan melihat bagaimana sebenarnya senarai Dropdown akan berfungsi dalam HTML. Terdapat beberapa atribut yang digunakan dalam
Contoh berikut akan menunjukkan bagaimana sebenarnya senarai Jatuh Turun akan digunakan:
Kod:
<head> <title>DropDown List</title> </head> <body> <h4>Seven Wonders of the world</h4> <form> <select name = "dropdown"> <option value = "taj" selected>Taj Mahal</option> <option value = "china">Great Wall of China</option> <option value = "chirst" required>Christ the Redeemer Satue</option> <option value = "machu" disabled>Machu Picchu</option> <option value = "chichen">Chichen Itza</option> <option value = "colossem">The Roman Colosseum</option> <option value = "petra">Petra</option> </select> </form> </body>
Contoh di atas mengandungi pilihan yang berbeza seperti dilumpuhkan, dipilih, diperlukan, dsb., yang ditunjukkan dalam skrin output.
Output:
Kod:
<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>Seperti yang ditunjukkan dalam tangkapan skrin di bawah, pilih berbilang pilihan daripada senarai juntai bawah, tekan butang yang diberikan dan pilih berbilang pilihan dengan menekan pada CTRL.
Output:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>
</head>
<body>
<h2>Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>
</body>
</html>Senarai lungsur turun akan dibuka pada kesan tuding.
Sortie :
Nous pouvons conclure que la liste déroulante est utilisée pour sélectionner une option dans la liste de sélection. Il est utilisé pour sélectionner une ou plusieurs options à la fois. Les utilisateurs peuvent sélectionner une option dans la liste selon leur choix, ce qui la rend plus conviviale. Les attributs répertoriés ci-dessus sont utilisés avec les balises select pour effectuer diverses opérations de sélection avec la liste déroulante.
Ceci est un guide de la liste déroulante en HTML. Nous discutons ici du fonctionnement de la liste déroulante en HTML et de ses exemples avec l'implémentation du code. Vous pouvez également consulter nos autres articles connexes pour en savoir plus –
Atas ialah kandungan terperinci Senarai jatuh turun dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
