Cara menggunakan nested dropdown in html

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 :
   
   
       Indonesia
       Singapura
       Malaysia
       Vietnam
      Thailand
      Filiphina
      Laos


   Hasil :
   
   
   
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 :
   
   
          Indonesia
          Singapura
          Malaysia
          Vietnam
          Thailand
          Filiphina
          Laos
   

   
   Hasil :
   
   
   
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 juga dapat dikunci atau tidak dapat dipilih dengan cara menggunakan atribut "disabled".
   Contoh :
   
   
          
                 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


   



   Hasil :



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

   Contoh :
   
   Kota di Pulau Jawa :

       
         
         
         
         

   
   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.

Pada kesempatan kali ini kita akan belajar mengenai Cara Membuat Menu Multi-level Dengan Bootstrap 4. Iya menu multilevel ini dimana ada menu bagian utama dan submenu secara bertingkat. Jadi dalam menu utama atau parent yang terlihat pada menu navigasi serta submenu biasa sebagai bagian childnya.

Baiklah kita lanjut bagaimana cara membuatnya, yuk simak langkah berikut ini:

Sahabat silahkan buat file HTML baru, tentu tidak lupa gunakan template awal dari Bootstrap dan ketikkan code berikut:

code diatas adalah template atau struktur yang dipakai dan bisa diperhatikan saya juga menyisipkan library jQuery plugin bootnavbar serta library animate.js  untuk efek hover, sahabat bisa cari dalam dokumentasi Bootstrap cari Navbar. Karena kita akan memakai class=”navbar” seperti code berikut:

Selanjutnya yaitu menambahkan sedikit script jQuery untuk bagian menu dropdown diberikan efek hover.

Jika sudah simpan semua yang sudah code yang diketikkan dan buka pada browser untuk melihat tampilannya apakah sudah seperti berikut ini:

Saya kira cukup dalam pembahasan kali ini tentang Cara Membuat Menu Multi-level Dengan Bootstrap 4. Sampai jumpa dilain kesempatan dan semoga bermanfaat.