Select Box atau yang sering disebut select option adalah form input yang digunakan untuk menampilkan option atau pilihan. Sebagai contoh menampilkan kategori maupun menampilkan sub kategori. Dalam kesempatan kali ini kita akan membuat select box berantai. Jadi saat dipilih satu option parent maka option child akan menampilkan data yang berhubungan dengan option parentnya.Dalam pembahasan tentang membuat select box pada artikel kali ini, saya akan membuat pilihan nama kota sebagai parentnya lalu nama kecamatan sebagai childnya. Baiklah agar tidak terlalu lama sahabat bisa langsung buka text editornya lalu ikuti step-step cara membuatnya.

Langkah Pertama

Buat file baru lalu ketikkan struktur html yang ada pada code berikut ini:

Pada code diatas sahabat jangan lupa untuk menambahkan link library ke vuejs. Lalu berikan

  • name pada input select  = kota_id
  • v-model = selectKotaIds
  • event @change=”onChangeChain
  • option dengan perulangan v-for=link in kota

Langkah Kedua

Tambahkan script sebelum tag penutup body seperti code dibawah ini:

Jika sudah langsung simpan kemudian jalankan pada browser masing-masing, apabila benar maka akan seperti tampilan berikut ini:

Cara Membuat Select Box Berantai Dengan VueJs

Saya kira cukup dalam pembahasan artikel ini tentang Cara Membuat Select Box Berantai Dengan VueJs. Semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.

terima kasih.