Dynamic Dependent Dropdown using VueJS and PHP

By Hardik Savani November 5, 2023 Category : PHP Bootstrap jQuery MySql Ajax Vue.JS

Generally, Dynamic Dependent Select Box is used for auto-populate a dropdown list on Dependant data. When you select one drop-down box value it will retrieve new Dependant data from database table. mostly you see for a country, state and city table. When you select country then the state will fill on select box option of the selected country. Same as for city.

As we know this task can perform using jquery ajax, without jquery ajax we cannot perform because we have to update select box value on based on change event.

So, in this post we will create Dynamic Dependent Dropdown using vue js and php mysql. for ajax request we will use axios js. it is really good work with vuejs. basically, we will create "countries", "states" and "cities" table. Then we will create three dropdown country, state and city. After that we will write php code for getting data from database table, so write sql query and back-end logic.

We need to create just two files as listed below:

1) index.php

2) ajaxpro.php

Ok now just create two file with database with following sql query. Let's just follow three step and you will get very simple and amazing example.

Step 1: Create Database Tables

In this step, we will create countries, states and cities table, so i simply give you sql query for create table. simply run that on your database.

Country Table:

CREATE TABLE IF NOT EXISTS `countries` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(80) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

State Table:

CREATE TABLE IF NOT EXISTS `states` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`country_id` int(11) NOT NULL,

`name` varchar(80) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;

City Table:

CREATE TABLE IF NOT EXISTS `cities` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`state_id` int(11) NOT NULL,

`name` varchar(80) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

Step 2: index.php

Now in this step, we will create index.php file with three select box for country, state and city. Then we will write code for vue.js, so simple get code:

<html lang="en">

<head>

<title>Dynamic Dependent Dropdown with Vue JS and PHP - ItSolutionStuff.com</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

<script src="http://demo.itsolutionstuff.com/plugin/jquery.js"></script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

</head>

<body>

<div class="container" id="myApp">

<h3>Dynamic Dependent Dropdown with Vue JS and PHP - ItSolutionStuff.com</h3>

<div class="form-group">

<label>Select Country:</label>

<select class='form-control' v-model='country' @change='getStates()'>

<option value='0' >Select Country</option>

<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>

</select>

</div>

<div class="form-group">

<label>Select State:</label>

<select class='form-control' v-model='state' @change='getCities()'>

<option value='0' >Select State</option>

<option v-for='data in states' :value='data.id'>{{ data.name }}</option>

</select>

</div>

<div class="form-group">

<label>Select City:</label>

<select class='form-control' v-model='city' >

<option value='0' >Select City</option>

<option v-for='data in cities' :value='data.id'>{{ data.name }}</option>

</select>

</div>

</div>

<script type="text/javascript">

var app = new Vue({

el: '#myApp',

data: {

country: 0,

countries: '',

state: 0,

states: '',

city: 0,

cities: ''

},

methods: {

getCountries: function(){

axios.get('ajaxpro.php', {

params: {

request: 'country'

}

})

.then(function (response) {

app.countries = response.data;

app.states = '';

app.cities = '';

app.state = 0;

app.city = 0;

});

},

getStates: function(){

axios.get('ajaxpro.php', {

params: {

request: 'state',

country_id: this.country

}

})

.then(function (response) {

app.states = response.data;

app.state = 0;

app.cities = '';

app.city = 0;

});

},

getCities: function(){

axios.get('ajaxpro.php', {

params: {

request: 'city',

state_id: this.state

}

})

.then(function (response) {

app.cities = response.data;

app.city = 0;

});

}

},

created: function(){

this.getCountries();

}

});

</script>

</body>

</html>

Step 3: ajaxpro.php

In this file, we need to create ajaxpro.php and we will configure database details, write code of fetch data from database table. so simple copy below code:

<?php

$hostName = "localhost";

$username = "root";

$password = "root";

$dbname = "sole";

$mysqli = new mysqli($hostName, $username, $password, $dbname);

switch ($_GET['request']) {

case 'country':

$sql = "SELECT * FROM countries";

break;

case 'state':

$sql = "SELECT * FROM states WHERE country_id = ". $_GET['country_id'];

break;

case 'city':

$sql = "SELECT * FROM cities WHERE state_id = ". $_GET['state_id'];

break;

default:

break;

}

$result = $mysqli->query($sql);

$response = [];

while($row = mysqli_fetch_assoc($result)){

$response[] = array("id"=>$row['id'], "name"=>$row['name']);

}

echo json_encode($response);

?>

Now you can run example and check it your own. I also added demo and you can also download full script.

I hope it can help you...

Shares