Membuat Multiple Select Responsive di Bootstrap, Pilih Lebih dari Satu Option !

0

Dropdown select pada elemen form Bootstrap defaultnya memang hanya dapat memilih satu option saja seperti yang pernah dijelaskan pada postingan sebelumnya mengenai cara membuat dropdown select responsive di Bootstrap, tapi sebetulnya bisa diatur multiple select sehingga dapat memilih lebih dari satu option. Multiple select ini biasanya digunakan pada pemilihan kategori, jurusan pada situs akademi, dll. Contoh multiple-select:

gambar 1 - contoh multiple select bootstrap

Membuat select pada HTML itu memerlukan tag <select> pada strukutr formulir, jika menggunakan Bootstrap, tambahkan multiple dalam tag <select> agar membuatnya multiple. Contoh:

ads by posciety

<h2>Form control: select</h2>
  <form>
    <div class="form-group">
      <label for="posmulSel">Mutiple select Bootstrap - Posciety.Com</label>
      <select multiple class="form-control" id="posmulSel">
        <option>Pilihan 1</option>
        <option>Pilihan 2</option>
        <option>Pilihan 3</option>
        <option>Pilihan 4</option>
        <option>Pilihan 5</option>
        <option>Pilihan 6</option>
        <option>Pilihan 7</option>
      </select>
    </div>
  </form>

Jangan lupa untuk memberikan class form-control pada select agar compatible dengan tampilan Bootstrap (tidak berantakan), simpan dan lihat hasilnya !

Btw, apa itu multiple select ? Seperti yang terlihat pada contoh di atas, multiple select memungkinkan para pengguna untuk memilih lebih dari 1 pilihan yang ada dengan cara menekan CTRL + klik pada opsi-opsi yang ingin dipilih atau membloknya dengan menekan mouse hingga 3 opsi (jika ingin memilih 3 opsi).

Artikel Lainnya
Berikan Komentar

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya