In this post, we'll build a multi-level dependent dropdown list in Vue.js. In our example, we'll start with listing all countries in the country dropdown. Once a country is selected, the corresponding states will be fetched from the JSON data and displayed in the state dropdown.
Then, upon selecting a state, the relevant cities will be retrieved from the JSON data and populated in the cities dropdown.In this post, we'll build a multi-level dependent dropdown list in Vue.js. In our example, we'll start with listing all countries in the country dropdown.
Once a country is selected, the corresponding states will be fetched from the JSON data and displayed in the state dropdown. Then, upon selecting a state, the relevant cities will be retrieved from the JSON data and populated in the cities dropdown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js Multi-level Dependent Dropdown</title>
<!-- Include Vue.js library -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<!-- Country dropdown -->
<select v-model="selectedCountry" @change="onCountryChange">
<option value="">Select Country</option>
<option v-for="country in countries" :key="country.id" :value="country.id">{{ country.name }}</option>
</select>
<!-- State dropdown -->
<select v-model="selectedState" @change="onStateChange" v-if="selectedCountry">
<option value="">Select State</option>
<option v-for="state in states" :key="state.id" :value="state.id">{{ state.name }}</option>
</select>
<!-- City dropdown -->
<select v-model="selectedCity" v-if="selectedState">
<option value="">Select City</option>
<option v-for="city in cities" :key="city.id" :value="city.id">{{ city.name }}</option>
</select>
</div>
<script>
new Vue({
el: '#app',
data: {
selectedCountry: '',
selectedState: '',
selectedCity: '',
countries: [
{ id: 1, name: 'USA' },
{ id: 2, name: 'Canada' },
{ id: 3, name: 'UK' }
],
states: [],
cities: []
},
methods: {
onCountryChange() {
// Simulate fetching states from API based on selected country
// In real scenario, you would make an AJAX call here
this.states = []; // Reset states
if (this.selectedCountry === '1') { // USA
this.states = [
{ id: 1, name: 'New York' },
{ id: 2, name: 'California' },
{ id: 3, name: 'Texas' }
];
} else if (this.selectedCountry === '2') { // Canada
this.states = [
{ id: 4, name: 'Ontario' },
{ id: 5, name: 'Quebec' },
{ id: 6, name: 'British Columbia' }
];
} else if (this.selectedCountry === '3') { // UK
this.states = [
{ id: 7, name: 'London' },
{ id: 8, name: 'Manchester' },
{ id: 9, name: 'Birmingham' }
];
}
},
onStateChange() {
// Simulate fetching cities from API based on selected state
// In real scenario, you would make an AJAX call here
this.cities = []; // Reset cities
if (this.selectedState === '1') { // New York
this.cities = [
{ id: 1, name: 'New York City' },
{ id: 2, name: 'Buffalo' },
{ id: 3, name: 'Rochester' }
];
} else if (this.selectedState === '2') { // California
this.cities = [
{ id: 4, name: 'Los Angeles' },
{ id: 5, name: 'San Francisco' },
{ id: 6, name: 'San Diego' }
];
} else if (this.selectedState === '3') { // Texas
this.cities = [
{ id: 7, name: 'Houston' },
{ id: 8, name: 'Austin' },
{ id: 9, name: 'Dallas' }
];
} // Similarly for other states
}
}
});
</script>
</body>
</html>