selectoptiondropdownMenengah3 mnt baca

Select: Dropdown Pilihan

Bikin dropdown dengan select, option, optgroup, dan multiple select.

Kenapa Dropdown Ada?

Bayangkan form pendaftaran yang menanyakan provinsi lewat input teks biasa. Satu orang menulis "Jawa Barat", yang lain "Jabar", yang lain lagi typo menjadi "Jawa Baraat". Datanya berantakan dan susah diolah. Dropdown menyelesaikan masalah ini: pengguna hanya bisa memilih dari daftar yang sudah kamu tentukan. Tidak ada typo, tidak ada variasi aneh, data selalu konsisten.

Alasan kedua adalah hemat tempat. Daftar 38 provinsi kalau ditulis sebagai radio button akan menelan satu layar penuh. Dropdown melipat semuanya menjadi satu baris rapi yang baru terbuka saat diklik.

Struktur Dasar

html
<label>Provinsi:
  <select name="provinsi">
    <option value="jabar">Jawa Barat</option>
    <option value="jateng" selected>Jawa Tengah</option>
    <option value="jatim">Jawa Timur</option>
  </select>
</label>

Yang dikirim ke server adalah value, bukan teks yang terlihat. Perbedaan ini disengaja: teks boleh panjang dan manusiawi, sedangkan value pendek dan stabil untuk diolah server. Atribut selected menandai pilihan awal yang tampil sebelum pengguna mengubah apa pun.

Contoh Realistis: Mengelompokkan dengan optgroup

Saat daftar opsi panjang, kelompokkan dengan optgroup agar mudah dipindai. Label grup tampil sebagai judul yang tidak bisa dipilih.

html
<label>Jurusan:
  <select name="jurusan">
    <optgroup label="IPA">
      <option value="bio">Biologi</option>
      <option value="fis">Fisika</option>
    </optgroup>
    <optgroup label="IPS">
      <option value="eko">Ekonomi</option>
      <option value="sos">Sosiologi</option>
    </optgroup>
    <optgroup label="Bahasa" disabled>
      <option value="ing">Bahasa Inggris</option>
    </optgroup>
  </select>
</label>

Atribut disabled pada optgroup menonaktifkan seluruh grup sekaligus, berguna saat satu kategori sedang tidak tersedia. Ingat, optgroup hanya boleh berisi option, tidak bisa disarangkan ke dalam optgroup lain.

Pilihan Ganda dengan multiple

Secara default dropdown hanya memilih satu opsi. Tambahkan multiple agar pengguna bisa memilih beberapa sekaligus dengan menahan Ctrl (atau Cmd di Mac) sambil mengklik:

html
<label>Hobi (boleh pilih lebih dari satu):
  <select name="hobi" multiple size="4">
    <option value="game">Game</option>
    <option value="musik">Musik</option>
    <option value="olahraga">Olahraga</option>
    <option value="masak">Masak</option>
  </select>
</label>

size menentukan berapa opsi yang terlihat tanpa scroll. Tanpa size, dropdown satu pilihan tampil sebagai satu baris, sedangkan versi multiple tampil sebagai kotak daftar.

Kesalahan Umum

Kesalahan pertama: lupa memberi value pada option. Kalau value tidak ada, yang terkirim adalah teksnya. Teks bisa berubah kapan saja ("Jakarta" menjadi "DKI Jakarta"), dan perubahan kecil itu cukup untuk merusak data lama di server.

html
<!-- Salah: yang terkirim teks, rawan berubah -->
<option>Jakarta</option>

<!-- Benar: value stabil, teks bebas diganti -->
<option value="jkt">Jakarta</option>

Kesalahan kedua: memakai dropdown untuk pilihan yang hanya dua atau tiga. Pengguna harus mengklik dua kali (membuka lalu memilih) untuk sesuatu yang sebenarnya bisa langsung terlihat. Untuk daftar pendek, radio button lebih jujur karena semua opsi terpampang sejak awal.

Catatan teknis: Isi value sebaiknya tanpa spasi dan konsisten memakai huruf kecil, karena banyak server membandingkan string secara persis ("JKT" dan "jkt" dianggap berbeda). Tentukan konvensinya di awal dan patuhi di seluruh form.

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

Tantangan

Dropdown Menu Warkop

Buat select pesanan dengan 2 optgroup ("Minuman" berisi 3 option, "Makanan" berisi 2 option). Tiap option punya value singkat. Satu option jadi selected default. Tantangan ini melatihmu menyusun daftar pilihan yang rapi dan konsisten, skill yang dipakai di hampir semua form nyata seperti pemesanan, pendaftaran, dan checkout.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Pesan</title>
</head>
<body>
  <form>
    <!-- select di sini -->
  </form>
</body>
</html>
Open on CodeSandboxOpen Sandbox