Bagaimana saya menggunakan html5 & lt; pilih & gt; Elemen dan pilihannya untuk menu jatuh turun?

Menggunakan elemen HTML5 <select></select> untuk menu dropdown

Elemen HTML5 <select></select> adalah blok bangunan asas untuk membuat menu jatuh turun. Ia sangat mudah untuk dilaksanakan. Struktur asas melibatkan tag <select></select> itu sendiri, yang mengandungi satu atau lebih tag <option></option> , masing -masing mewakili item yang boleh dipilih dalam lungsur turun. Atribut value setiap <option></option> tag Menentukan nilai yang dikemukakan apabila pilihan dipilih. Kandungan teks tag <option></option> adalah apa yang pengguna lihat.

Inilah contoh mudah:

 <code class="html"><select id="myDropdown"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select></code>

Ini mewujudkan menu dropdown dengan tiga pilihan: Apple, Pisang, dan Orange. Apabila pengguna memilih pilihan, nilai ("Apple", "Pisang", atau "Orange") akan dikemukakan dengan borang (jika <select></select> adalah sebahagian daripada borang) atau boleh diakses menggunakan JavaScript. Anda juga boleh menambah atribut selected untuk memilih pilihan:

 <code class="html"><option value="banana" selected>Banana</option></code>

Anda juga boleh menggunakan atribut disabled untuk mengelakkan pengguna memilih pilihan tertentu:

 <code class="html"><option value="grape" disabled>Grape (out of season)</option></code>

Atribut size dapat mengawal bilangan pilihan yang kelihatan tanpa perlu mengklik untuk membuka lungsur turun:

 <code class="html"><select id="myDropdown" size="3"> <option value="apple">Apple</option> <option value="banana">Banana</option> <option value="orange">Orange</option> </select></code>

Menu dropdown HTML5 Styling dengan CSS

Styling <select></select> unsur -unsur dengan CSS tulen boleh menjadi rumit kerana rendering penyemak imbas berbeza dengan ketara. Walaupun anda boleh gaya beberapa aspek secara langsung, penyesuaian penuh sering memerlukan beberapa penyelesaian.

Anda boleh gaya penampilan keseluruhan elemen <select></select> menggunakan sifat CSS standard seperti width , font-family , font-size , color , background-color , dan border .

 <code class="css">#myDropdown { width: 200px; padding: 5px; font-size: 16px; border: 1px solid #ccc; border-radius: 5px; }</code>

Walau bagaimanapun, gaya dropdown itu sendiri (senarai pilihan) lebih mencabar. Anda mungkin mempunyai kejayaan yang terhad dengan gaya pilihan dengan :hover dan :focus kelas pseudo. Untuk gaya yang lebih luas, anda sering perlu menggunakan JavaScript atau kerangka CSS, atau bergantung pada awalan vendor khusus penyemak imbas (yang umumnya tidak digalakkan untuk mengekalkan). Untuk gaya yang lebih maju, pertimbangkan untuk menggunakan rangka kerja CSS seperti Bootstrap atau Tailwind CSS, yang menyediakan gaya pra-dibina untuk elemen pilihan.

Pertimbangan Kebolehcapaian untuk <select></select> Elements

Kebolehcapaian adalah penting untuk memastikan menu dropdown anda boleh digunakan oleh semua orang. Berikut adalah beberapa pertimbangan utama:

• Label jelas: Sentiasa mengaitkan elemen <label></label> dengan elemen <select></select> anda menggunakan for pada <label></label> dan atribut id pada <select></select> . Ini membolehkan teknologi bantuan (seperti pembaca skrin) untuk mengenal pasti tujuan dropdown dengan jelas.

 <code class="html"><label for="myDropdown">Choose a Fruit:</label> <select id="myDropdown"> <!-- options here --> </select></code>

• Nilai pilihan yang bermakna: Gunakan teks deskriptif dan ringkas untuk nilai pilihan anda. Elakkan hanya menggunakan nombor atau singkatan kecuali konteks menjadikannya jelas.
• Atribut Aria: Walaupun secara amnya tidak diperlukan dengan ketat, atribut ARIA dapat meningkatkan kebolehcapaian. Sebagai contoh, aria-describedby boleh menghubungkan <select></select> ke penerangan yang lebih terperinci di tempat lain pada halaman.
• Navigasi Papan Kekunci: Pastikan pengguna boleh menavigasi dan memilih pilihan menggunakan papan kekunci sahaja (tab untuk mencapai dropdown, kekunci anak panah untuk menavigasi, masukkan untuk memilih).

Unsur -unsur <select></select> dinamik dengan JavaScript

JavaScript menyediakan cara yang kuat untuk memanipulasi elemen <select></select> secara dinamik. Anda boleh menambah, membuang, atau mengubahsuai pilihan semasa runtime.

Untuk menambah pilihan:

 <code class="javascript">const selectElement = document.getElementById("myDropdown"); const newOption = document.createElement("option"); newOption.value = "grape"; newOption.text = "Grape"; selectElement.appendChild(newOption);</code>

Untuk membuang pilihan:

 <code class="javascript">const selectElement = document.getElementById("myDropdown"); selectElement.removeChild(selectElement.options[0]); // Removes the first option</code>

Untuk mengisi dari array:

 <code class="javascript">const fruits = ["Apple", "Banana", "Orange", "Grape"]; const selectElement = document.getElementById("myDropdown"); fruits.forEach(fruit => { const newOption = document.createElement("option"); newOption.value = fruit.toLowerCase(); newOption.text = fruit; selectElement.appendChild(newOption); });</code>

Contoh -contoh ini menunjukkan manipulasi asas. Senario yang lebih kompleks mungkin melibatkan pengambilan data dari pelayan atau menggunakan kerangka JavaScript seperti React, Vue, atau Angular untuk pengurusan kandungan dinamik yang lebih cekap dan teratur. Ingatlah untuk sentiasa mengendalikan kesilapan yang berpotensi (seperti elemen yang tidak dijumpai) dengan anggun.

Atas ialah kandungan terperinci Bagaimana saya menggunakan html5 & lt; pilih & gt; Elemen dan pilihannya untuk menu jatuh turun?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!