Dynamic Dependent Dropdown in Vue.js using PHP

In this post, We will show you how to create dynamic dependent select box using Vue.js with PHP script. For learn the concept of dynamic dependent dropdown feature, here we will use the basix example of country, state and city select box. Here we will make dynamic dependent select box with VueJS using PHP and Mysql table with Axios package for send Ajax request.

Mostly, Dynamic Dependent dropdown box is used to fill auto-populated dropdown list on dynamic dependent data. So, when we have select one select box data, then child dropdown box will fetch data from database and filled into dependent select box. This type of functionality mostly used for filled country, state, city example or category, sub-category form data. But here we will use Country, state and City example for make dynamic dependent dropdown using VueJS and PHP scropt. So, when in this example when use has been select country then state select box data will be fetch from database and fill state select box option with selected country state, and this same process for city select box also. Below you can find step by step process for build dynamic dependent dropdown in Vue.js with PHP.

For make dynamic dependent select box here we have make two file.

index.php
action.php

Database

First you have to create Mysql database in your local phpmyadmin and then after run following SQL script, it will make country, state and city table in mysql database.

--
-- Database: `country_state_city`
--

-- --------------------------------------------------------

--
-- Table structure for table `city`
--

CREATE TABLE `city` (
  `city_id` int(11) NOT NULL,
  `state_id` int(11) NOT NULL,
  `city_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `city`
--

INSERT INTO `city` (`city_id`, `state_id`, `city_name`) VALUES
(1, 1, 'New York city'),
(2, 1, 'Buffalo'),
(3, 1, 'Albany'),
(4, 2, 'Birmingham'),
(5, 2, 'Montgomery'),
(6, 2, 'Huntsville'),
(7, 3, 'Los Angeles'),
(8, 3, 'San Francisco'),
(9, 3, 'San Diego'),
(10, 4, 'Toronto'),
(11, 4, 'Ottawa'),
(12, 5, 'Vancouver'),
(13, 5, 'Victoria'),
(14, 6, 'Sydney'),
(15, 6, 'Newcastle'),
(16, 7, 'City of Brisbane'),
(17, 7, 'Gold Coast'),
(18, 8, 'Bangalore'),
(19, 8, 'Mangalore'),
(20, 9, 'Hydrabad'),
(21, 9, 'Warangal');

-- --------------------------------------------------------

--
-- Table structure for table `country`
--

CREATE TABLE `country` (
  `country_id` int(11) NOT NULL,
  `country_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `country`
--

INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'USA'),
(2, 'Canada'),
(3, 'Australia'),
(4, 'India');

-- --------------------------------------------------------

--
-- Table structure for table `state`
--

CREATE TABLE `state` (
  `state_id` int(11) NOT NULL,
  `country_id` int(11) NOT NULL,
  `state_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `state`
--

INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'New York'),
(2, 1, 'Alabama'),
(3, 1, 'California'),
(4, 2, 'Ontario'),
(5, 2, 'British Columbia'),
(6, 3, 'New South Wales'),
(7, 3, 'Queensland'),
(8, 4, 'Karnataka'),
(9, 4, 'Telangana');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `city`
--
ALTER TABLE `city`
  ADD PRIMARY KEY (`city_id`);

--
-- Indexes for table `country`
--
ALTER TABLE `country`
  ADD PRIMARY KEY (`country_id`);

--
-- Indexes for table `state`
--
ALTER TABLE `state`
  ADD PRIMARY KEY (`state_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `city`
--
ALTER TABLE `city`
  MODIFY `city_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=22;

--
-- AUTO_INCREMENT for table `country`
--
ALTER TABLE `country`
  MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=5;

--
-- AUTO_INCREMENT for table `state`
--
ALTER TABLE `state`
  MODIFY `state_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;

View Demo

index.php

In this file, we have already included Vue.js library and axios package link. In this file we have to create three select box for select country, state and city data and by using Vue.js script we will convert into dynamic dependent dropdown select box. For dynamic fillled select box with option data here we have make Vue method, which will send Ajax request to php script for fetch data from Mysql database and received data in json format. After this by using v-for directive it will fill select box with option data.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dynamic Dependent Select Box in Vue.js using PHP</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
 </head>
 <body>
  <div class="container" id="dynamicApp">
   <br />
   <h3 align="center">Dynamic Dependent Select Box in Vue.js using PHP</h3>
   <br />
   <div class="panel panel-default">
    <div class="panel-heading">Select Data</div>
    <div class="panel-body">
     <div class="form-group">
      <label>Select Country</label>
      <select class="form-control input-lg" v-model="select_country" @change="fetchState">
       <option value="">Select Country</option>
       <option v-for="data in country_data" :value="data.country_id">{{ data.country_name }}</option>
      </select>
           </div>
           <div class="form-group">
      <label>Select State</label>
      <select class="form-control input-lg" v-model="select_state" @change="fetchCity">
       <option value="">Select state</option>
       <option v-for="data in state_data" :value="data.state_id">{{ data.state_name }}</option>
      </select>
           </div>
           <div class="form-group">
      <label>Select City</label>
      <select class="form-control input-lg" v-model="select_city">
       <option value="">Select City</option>
       <option v-for="data in city_data" :value="data.city_id">{{ data.city_name }}</option>
      </select>
           </div>
    </div>
   </div>
  </div>
 </body>
</html>

<script>

var application = new Vue({
 el:'#dynamicApp',
 data:{
  select_country:'',
  country_data:'',
  select_state:'',
  state_data:'',
  select_city:'',
  city_data:''
 },
 methods:{
  fetchCountry:function(){
   axios.post("action.php", {
    request_for:'country'
   }).then(function(response){
    application.country_data = response.data;
    application.select_state = '';
    application.state_data = '';
    application.select_city = '';
    application.city_data = '';
   });
  },
  fetchState:function(){
   axios.post("action.php", {
    request_for:'state',
    country_id:this.select_country
   }).then(function(response){
    application.state_data = response.data;
    application.select_state = '';
    application.select_city = '';
    application.city_data = '';
   });
  },
  fetchCity:function(){
   axios.post("action.php", {
    request_for:'city', 
    state_id:this.select_state
   }).then(function(response){
    application.city_data = response.data;
    application.select_city = '';
   });
  }
 },
 created:function(){
  this.fetchCountry();
 }
});

</script>

action.php

All PHP script has been write in this file, In this file, first we have make database connection and then after it has received Ajax request data in json format and converted into PHP Array object. After it check request for fetch data from which table, and then after it will make query and execute and fetch data from Mysql table and store in Array. Lastly for send this data to Ajax request in json format.

<?php

//action.php

$connect = new PDO("mysql:host=localhost;dbname=country_state_city", "root", "");

$received_data = json_decode(file_get_contents("php://input"));

if($received_data->request_for == 'country')
{
 $query = "
 SELECT * FROM country 
 ORDER BY country_name ASC
 ";
}

if($received_data->request_for == 'state')
{
 $query = "
 SELECT * FROM state 
 WHERE country_id = '".$received_data->country_id."' 
 ORDER BY state_name ASC
 ";
}

if($received_data->request_for == 'city')
{
 $query = "
 SELECT * FROM city 
 WHERE state_id = '".$received_data->state_id."' 
 ORDER BY city_name ASC
 ";
}

$statement = $connect->prepare($query);

$statement->execute();

while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
 $data[] = $row;
}

echo json_encode($data);


?>

So, From this post, you can learn how to make dynamic dependent dropdown with Vue.js and PHP. Try this source in your local computer and We hope you have learn something new from this our new tutorial.