May 14, 2024
Category : PHP
Bootstrap
jQuery
MySql
Ajax
Vue.JS
Dynamic Dependent Dropdown using VueJS and PHP
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...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
Subscribe me on: Youtube
We are Recommending you
- Dynamic Form Validation in VueJs with PHP Laravel 5.6
- Vue JS Scroll to Element in Div using Vue-scrollto Example
- Codeigniter Dynamic Dependent Dropdown using Ajax Example
- PHP Ajax Dependent Dropdown List Example
- Laravel - Dynamic Dependant Select Box using JQuery Ajax Example - Part 1
- Laravel Dynamic Dependent Dropdown Example
- Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch
;void(0);){kind=link}