Dynamic Dependent Dropdown using VueJS and PHP
In this post we will give you information about Dynamic Dependent Dropdown using VueJS and PHP. Hear we will give you detail about Dynamic Dependent Dropdown using VueJS and PHPAnd how to use it also give you demo for it if it is necessary.
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.onlinecode/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 id="myApp">
<h3>Dynamic Dependent Dropdown with Vue JS and PHP - ItSolutionStuff.com</h3>
<div >
<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 >
<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 >
<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…
Hope this code and post will helped you for implement Dynamic Dependent Dropdown using VueJS and PHP. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs