Pada Artikel ini kita akan belajar Cara Membuat Chain Select Option Dengan VueJS, yang ingin kita buat select option berantai. Berantai disini yaitu jika kita pilih option parentnya maka bagian child akan menampilkan option yang berhubungan. Sebagai contoh saya akan membuat select option yang berisi nama Provinsi serta Kota yang ada di Indonesia.

Tentunya sebagai data Option Parent disini saya gunakan nama Provinsi dan data child saya tampilkan nama Kota. Baiklah langsung saja kita membuatnya berikut langkah-langkahnya :

Silahkan sahabat membuat sebuah file HTML kemudian ketikkan code seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
	<div class="container mt-5">
		<div class="row">
			<div class="col-md-4 offset-4">
			<div class="card">
			  <div class="card-header text-center bg-info text-white">
			   <h5>Membuat Chain Select Option Dengan VueJs</h5> 
			  </div>
			  <div class="card-body">			
				<div id="app">
				  <h5>Provinsi</h5>
				  <select class="form-control" name="chain_id" v-model="selectedChainIds" @change="onChangeChain">
				    <!-- <option>~ Pilih Provinsi ~</option> -->
				    <option v-for="link in chain" :value="link.id" v-text="link.name"></option>
				  </select>
				  	<div  v-if="filteredChain.length">
				    	<h5>Kota</h5>
				    	<select class="form-control" name="subChain_id" v-model="selectedSubChainIds">
				      	<!-- <option>~ Pilih Kota ~</option> -->
				      	<option v-for="chain in filteredChain" :value="chain.id" v-text="chain.name"></option>
				    </select>
			  		</div>
			  	</div>
			  </div>	
			</div>
		</div>
	</div>

perhatikan bagian tag <head> saya ada sisipkan library dari Bootstrap dan VueJs.

Selanjutnya jagan lupa untuk menambahkan script yang berisi value dari data nama provinsi serta data nama kota yang akan ditampilkan, silahkan sahabat ikuti script dibawah ini:

<script>
	new Vue({
  data: {
    chain: [
      {id: 1, name: 'DKI Jakarta'},
      {id: 2, name: 'Jawa Barat'},
      {id: 3 , name: 'Jawa Tengah'},
      {id: 4 , name: 'Jawa Timur'},
      {id: 5 , name: 'Banten'}
      ],
    subChain: [
      {"id": 1, "name": "Jakarta Barat", "chain_id": 1},
      {"id": 2, "name": "Jakarta Pusat", "chain_id": 1},
      {"id": 3, "name": "Jakarta Selatan", "chain_id": 1},
      {"id": 4, "name": "Jakarta Timur", "chain_id": 1},
      {"id": 4, "name": "Jakarta Utara", "chain_id": 1},
      {"id": 5, "name": "Bandung", "chain_id": 2},
      {"id": 6, "name": "Karawang", "chain_id": 2},
      {"id": 7, "name": "Semarang", "chain_id": 3},
      {"id": 8, "name": "Solo", "chain_id": 3},
      ],
    selectedChainIds: -1,
    selectedSubChainIds: -1
  },
  methods: {
    onChangeChain() {
      
      this.selectedSubChainIds = -1;
      
      if(!this.selectedChainIds) {
        
        this.selectedChainIds = -1;
        
      }
      
    }
  },
  computed: {
    filteredChain() {
      
      let filteredsubChains = [];
      
      for(let i = 0 ; i < this.subChain.length ; i++) {
        
        let subChain = this.subChain[i];
        
        if(subChain.chain_id == this.selectedChainIds) {
          
          filteredsubChains.push(subChain);
          
        }
        
      }
      
      return filteredsubChains;
      
    }
    
  }
}).$mount('#app');
</script>

Baiklah jika sudah langsung saja simpan code-code diatas lalu jalankan pada browser masing dan lihat hasilnya dengan memilih provinsi maka akan menampilkan kota sesuai id dari provinsinya.

Saya kira cukup dalam pembhasan artikel ini tentang Cara Membuat Chain Select Option Dengan VueJS. Semoga bermanfaat serta menambahkan materi belajar sahabat semua, selamat mencoba.

WhatsApp chat