selectoptiondropdownMenengah3 mnt baca

Select Lanjutan: optgroup dan multiple

Mengelompokkan opsi dengan optgroup dan memilih banyak dengan multiple + size: contoh nyata memilih kota per provinsi.

Masalahnya: Daftar Panjang yang Membingungkan

Dropdown berisi 30 kota dalam satu daftar datar itu melelahkan: pengguna scroll tanpa petunjuk, salah pilih, lalu mengulang. Solusinya bukan membelah jadi banyak dropdown, melainkan mengelompokkan opsi yang ada. Di sinilah optgroup berperan: memberi struktur pada daftar panjang tanpa menambah field baru.

optgroup: Kategori di Dalam Dropdown

<optgroup> membungkus beberapa <option> di bawah satu label kategori yang tidak bisa dipilih:

html
<label for="kota">Kota tujuan:</label>
<select id="kota" name="kota">
  <optgroup label="Jawa Barat">
    <option value="bdg">Bandung</option>
    <option value="bgr">Bogor</option>
    <option value="dpk">Depok</option>
  </optgroup>
  <optgroup label="Jawa Tengah">
    <option value="smg">Semarang</option>
    <option value="slo">Solo</option>
  </optgroup>
  <optgroup label="Jawa Timur">
    <option value="sby">Surabaya</option>
    <option value="mlg">Malang</option>
  </optgroup>
</select>

Label grup tampil sebagai judul abu-abu yang tidak bisa diklik, sehingga mata langsung tahu "oh, kota-kota ini satu provinsi". Atribut label pada optgroup itu wajib: tanpa itu grupnya tidak punya nama dan gunanya hilang.

Satu grup juga bisa dinonaktifkan sekaligus dengan disabled pada <optgroup>, misalnya kategori yang stoknya habis atau belum tersedia.

multiple + size: Pilih Lebih dari Satu

Secara default select hanya memilih satu opsi. Tambahkan multiple untuk mengizinkan banyak pilihan (dengan Ctrl+klik atau Cmd+klik), dan size untuk menentukan berapa opsi terlihat sekaligus tanpa membuka dropdown:

html
<label for="wisata">Kota wisata impian (boleh pilih banyak):</label><br />
<select id="wisata" name="wisata" multiple size="6">
  <optgroup label="Jawa Barat">
    <option value="bdg">Bandung</option>
    <option value="bgr">Bogor</option>
  </optgroup>
  <optgroup label="Bali">
    <option value="dps">Denpasar</option>
    <option value="ubd">Ubud</option>
  </optgroup>
  <optgroup label="Sumatera Utara">
    <option value="mdn">Medan</option>
    <option value="prp">Parapat</option>
  </optgroup>
</select>

Tanpa size, select multiple hanya menampilkan satu baris dan pengguna harus tahu cara scroll di dalamnya: pengalaman yang buruk. size="6" mengubahnya menjadi kotak list yang jelas. Nilai yang terkirim adalah semua value yang dipilih, dan di sisi server biasanya dibaca sebagai array (konvensi umum: name="wisata[]").

Contoh Nyata: Pilih Kota per Provinsi

Gabungkan keduanya dalam form pemesanan travel yang realistis:

html
<form action="/pesan-travel" method="post">
  <p>
    <label for="asal">Kota keberangkatan:</label><br />
    <select id="asal" name="kota_asal" required>
      <option value="">-- Pilih kota --</option>
      <optgroup label="Jawa Barat">
        <option value="bdg">Bandung</option>
        <option value="bgr">Bogor</option>
      </optgroup>
      <optgroup label="DKI Jakarta">
        <option value="jkt-sel">Jakarta Selatan</option>
        <option value="jkt-pst">Jakarta Pusat</option>
      </optgroup>
    </select>
  </p>
  <p>
    <label for="tujuan">Kota tujuan (boleh lebih dari satu):</label><br />
    <select id="tujuan" name="kota_tujuan" multiple size="5" required>
      <optgroup label="Jawa Tengah">
        <option value="smg">Semarang</option>
        <option value="slo">Solo</option>
        <option value="yog">Yogyakarta</option>
      </optgroup>
      <optgroup label="Jawa Timur">
        <option value="sby">Surabaya</option>
        <option value="mlg">Malang</option>
      </optgroup>
    </select>
  </p>
  <p><button type="submit">Cari Travel</button></p>
</form>

Opsi pertama yang kosong (value="") berfungsi sebagai placeholder "pilih dulu", dan karena select-nya required, browser menolak submit selama opsi placeholder masih terpilih. Ini pola standar untuk dropdown wajib isi.

Kesalahan Umum: Salah vs Benar

html
<!-- SALAH: optgroup tanpa label, grupnya anonim -->
<select name="kota">
  <optgroup>
    <option>Bandung</option>
  </optgroup>
</select>

<!-- SALAH: multiple tanpa size, cuma terlihat satu baris -->
<select name="hobi" multiple>
  <option>Game</option>
  <option>Musik</option>
  <option>Masak</option>
</select>

<!-- BENAR: label jelas + size yang cukup -->
<select name="hobi" multiple size="4">
  <optgroup label="Dalam ruangan">
    <option value="game">Game</option>
    <option value="musik">Musik</option>
  </optgroup>
  <optgroup label="Luar ruangan">
    <option value="lari">Lari</option>
    <option value="masak">Masak</option>
  </optgroup>
</select>

Kesalahan lain: menaruh <option> langsung sejajar <optgroup> secara acak sehingga sebagian opsi tidak terkelompokkan, dan lupa value sehingga yang terkirim adalah teks tampilan (rapuh kalau teksnya berubah). Untuk daftar pendek (2-4 opsi), pertimbangkan radio button: semua pilihan langsung terlihat tanpa perlu membuka apa-apa.

Catatan teknis: Tampilan optgroup (label abu-abu yang tidak bisa dipilih) sangat bergantung pada browser dan sistem operasi, dan sulit di-style dengan CSS. Kalau butuh dropdown yang tampilannya dikustom total, biasanya orang membangunnya dengan JavaScript. Tapi untuk fungsionalitas murni, optgroup bawaan tetap pilihan paling ringan dan paling aksesibel.

Rangkuman

optgroup memberi struktur pada daftar panjang lewat kategori berlabel, multiple + size mengubah dropdown menjadi kotak pilihan ganda yang jelas. Kombinasi keduanya menangani kasus nyata seperti "pilih kota per provinsi" tanpa satu baris JavaScript pun.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Pilih Menu per Kategori

Buat form pemesanan katering: satu select 'Paket' dengan optgroup Makanan dan Minuman (minimal 3 opsi tiap grup), plus satu select multiple + size='5' untuk 'Tambahan' (boleh pilih banyak). Daftar yang dikelompokkan mengurangi salah pilih dan membuat form panjang tetap nyaman dipakai.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Katering</title>
</head>
<body>
  <h1>Pesan Katering</h1>
  <form action="/pesan" method="post">
    <!-- select paket + select tambahan di sini -->
  </form>
</body>
</html>
Open on CodeSandboxOpen Sandbox