Cara Mudah Membuat Dropdown List di HTML

DROPDOWN LIST

Di postingan saya sebelumnya, kita belajar bersama tentang Cara Membuat Radio Button dan CheckBox di HTML yang hanya dapat memuat nilai dengan ukuran yang tidak banyak. Oleh karena itu, ada Dropdown List yang bisa mengatasi masalah tersebut jika kita ingin memuat nilai dengan ukuran yang lebih banyak. Scroll kebawah untuk membahas ya!

1. Dropdown List
   
   Dropdown List dalam pembuatan nya dilakukan dengan menggabungkan dua buah elemen yaitu select dan option. Select digunakan untuk membungkus seluruh elemen yang ada didalam option. Sedangkan option adalah nilai dropdown yang di inginkan.
   Contoh :
   
   <select>
       <option value="indonesia">Indonesia</option>
       <option value="singapura">Singapura</option>
       <option value="malaysia">Malaysia</option>
       <option value="vietnam">Vietnam</option>
      <option value="thailand">Thailand</option>
      <option value="filiphina">Filiphina</option>
      <option value="laos">Laos</option>
</select>

   Hasil :
   Indonesia Singapura Malaysia Vietnam Thailand Filiphina Laos
   
   
2. Multiple Dropdown List Item
   
   Multiple Dropdown List Item sama dengan  Dropdown List hanya saja kita dapat memilih dengan beberapa pilihan bukan hanya satu saja dan dalam pembuatan Multiple Dropdown List Item menggunakan tambahan atribut "multiple" pada elemen select.
   Contoh :
   
   <select multiple>
          <option value="indonesia">Indonesia</option>
          <option value="singapura">Singapura</option>
          <option value="malaysia">Malaysia</option>
          <option value="vietnam">Vietnam</option>
          <option value="thailand">Thailand</option>
          <option value="filiphina">Filiphina</option>
          <option value="laos">Laos</option>
   </select>
   
   Hasil :
   Indonesia Singapura Malaysia Vietnam Thailand Filiphina Laos
   
   
3. Dropdown OptGroup
   
   OptGroup ini, digunakan untuk membuat suatu daftar yang bersarang didalam Dropdown. Yang artinya, ada sebuah daftar didalam daftar. Singkatnya, seperti sebuah Menu yang mempunyai SubMenu. Tag yang digunakan adalah <optgroup>. OptGroup juga dapat dikunci atau tidak dapat dipilih dengan cara menggunakan atribut "disabled".
   Contoh :
   
<select>
       <optgroup label="Group 1">
              <option>Option 1.1</option>
              <option>Option 1.2</option>
              <option>Option 1.3</option>
       <optgroup label="Group 2">
              <option>Option 2.1</option>
              <option>Option 2.2</option>
              <option>Option 2.3</option>

   

          <optgroup label="Group 3" disabled>
              <option>Option 3.1</option>
              <option>Option 3.2</option>
              <option>Option 3.3</option>
</select>


   Hasil :
   Option 1.1 Option 1.2 Option 1.3 Option 2.1 Option 2.2 Option 2.3 Option 3.1 Option 3.2 Option 3.3
   
   
4. Dropdown Datalist
   Dropdown Datalist digunakan untuk memilih daftar pilihan yang telah ditentukan dari teks yang menjadi elemen teks input. Datalist juga menyediakan fitur autocomplete atau otomatis memberikan saran ketika beberapa huruf diketik pada elemen teks input. Tag yang digunakan adalah <datalist>.

   Contoh :
   
   <label>Kota di Pulau Jawa :
<input list="Daftar_kota"></label>
<datalist id="Daftar_kota">
         <option value="Jakarta">
         <option value="Serang">       
         <option value="Bandung">
         <option value="Semarang">
         <option value="Yogyakarta">
         <option value="Surabaya">
</datalist>
   
   Hasil :
   Kota di Pulau Jawa :
   
   

Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih.