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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.container{width: 500px;margin: auto;background: #bdc3c7; padding:10px;}
select{padding:7px;}
</style>
</head>
<body>
<div class="container">
<h3>Membuat Select Box Berantai Dengan VueJs</h3>
<div id="app">
<div id="app">
<h3>Kota Asal</h3>
<select name="kota_id" v-model="selectedKotaIds" @change="onChangeChain">
<option>-- Pilih Kota --</option>
<option v-for="link in kota" :value="link.id" v-text="link.name"></option>
</select>
<div v-if="filteredKota.length">
<h4>【Kecamatan】</h4>
<select name="subKota_id" v-model="selectedSubKotaIds">
<option>-- Pilih Kecamatan --</option>
<option v-for="kota in filteredKota" :value="kota.id" v-text="kota.name"></option>
</select>
</div>
</div>
</div>
</div>
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:
<script>
new Vue({
data: {
kota: [
{id: 1, name: 'Jakarta Barat'},
{id: 2, name: 'Jakarta Pusat'},
{id: 3, name: 'Jakarta Selatan'},
{id: 4, name: 'Jakarta Timur'},
{id: 5, name: 'Jakarta Utara'}
],
subKota: [
{"id": 1, "name": "Cengkareng", "kota_id": 1},
{"id": 2, "name": "Grogol", "kota_id": 1},
{"id": 3, "name": "Jelambar", "kota_id": 1},
{"id": 4, "name": "Kalideres", "kota_id": 1},
{"id": 5, "name": "Gambir", "kota_id": 2},
{"id": 6, "name": "Gajah Mada", "kota_id": 2},
{"id": 7, "name": "Kemang", "kota_id": 3},
{"id": 8, "name": "Pondok Indah", "kota_id": 3},
{"id": 9, "name": "Pondok Gede", "kota_id": 4},
{"id": 10, "name": "Pondok Bambu", "kota_id": 4},
{"id": 11, "name": "Kelapa Gading", "kota_id": 5},
{"id": 12, "name": "Tanjung Priok", "kota_id": 5},
],
selectedKotaIds: -1,
selectedSubKotaIds: -1
},
methods: {
onChangeChain() {
this.selectedSubKotaIds = -1;
if(!this.selectedKotaIds) {
this.selectedKotaIds = -1;
}
}
},
computed: {
filteredKota() {
let filteredsubKota = [];
for(let i = 0 ; i < this.subKota.length ; i++) {
let subKota = this.subKota[i];
if(subKota.kota_id == this.selectedKotaIds) {
filteredsubKota.push(subKota);
}
}
return filteredsubKota;
}
}
}).$mount('#app');
</script>
Jika sudah langsung simpan kemudian jalankan pada browser masing-masing, apabila benar maka akan seperti tampilan berikut ini:
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.