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>
This example shows a multi-level dependent dropdown list using Vue.js. It populates the country dropdown with predefined countries data. And upon selecting a country, it dynamically fetches and populates the states dropdown based on the selected country. Similarly, upon selecting a state, it dynamically fetches and populates the cities dropdown based on the selected state.

Read Similar Articles