Download or Include
axios
https://github.com/axios/axios
Using jsDelivr CDN: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
VueJS
https://vuejs.org/v2/guide/installation.html
CDN : https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js
CREATE TABLE `country` (
`id` int(6) NOT NULL,
`country` varchar(250) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `country` (`id`, `country`) VALUES
(1, 'Afghanistan'),
(171, 'Philippines'),
(227, 'United States of America');
ALTER TABLE `country`
ADD PRIMARY KEY (`id`);
ALTER TABLE `country`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
CREATE TABLE `state` (
`id` int(11) NOT NULL,
`name` varchar(150) NOT NULL,
`country_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `state` (`id`, `name`, `country_id`) VALUES
(1, 'ARMM', 171),
(2, 'Bicol', 171),
(3, 'Central Luzon', 171),
(4, 'Central Mindanao', 171),
(5, 'Alabama', 227),
(6, 'Alaska', 227),
(7, 'Arizona', 227),
(8, 'California', 227),
(9, 'Florida', 227);
ALTER TABLE `state`
ADD PRIMARY KEY (`id`);
ALTER TABLE `state`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
CREATE TABLE `city` (
`id` int(11) NOT NULL,
`cityname` varchar(150) NOT NULL,
`stateid` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `city` (`id`, `cityname`, `stateid`) VALUES
(1, 'Anaheim', 8),
(2, 'Arden-Arcade', 8),
(3, 'Bakersfield', 8),
(4, 'Carson', 8),
(5, 'Daly City', 8),
(6, 'Angeles City', 3),
(7, 'Olongapo', 3),
(8, 'San Fernando', 3),
(9, 'Tarlac', 3);
ALTER TABLE `city`
ADD PRIMARY KEY (`id`);
ALTER TABLE `city`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=10;
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue.js Axios Dynamic Dependent Select Box with PHP and Mysql</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@2.6.14/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div class="container" id="dynamicselectboxApp">
<h3 align="center">Vue.js Axios Dynamic Dependent Select Box with PHP and Mysql</h3>
<br />
<div class="panel panel-default">
<div class="panel-heading">Dynamic Dependent Select Box</div>
<div class="panel-body">
<div class="form-group">
<label>Select Country</label>
<select class="form-control input-lg" v-model="selcountry" @change="fetchState">
<option value="">Select Country</option>
<option v-for="data in country_data" :value="data.id">{{ data.country }}</option>
</select>
</div>
<div class="form-group">
<label>Select State</label>
<select class="form-control input-lg" v-model="selstate" @change="fetchCity">
<option value="">Select state</option>
<option v-for="data in state_data" :value="data.id">{{ data.name }}</option>
</select>
</div>
<div class="form-group">
<label>Select City</label>
<select class="form-control input-lg" v-model="selcity">
<option value="">Select City</option>
<option v-for="data in city_data" :value="data.id">{{ data.cityname }}</option>
</select>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#dynamicselectboxApp',
data:{
selcountry:'',
country_data:'',
selstate:'',
state_data:'',
selcity:'',
city_data:''
},
methods:{
fetchCountry:function(){
axios.post("action.php", {
postRequest:'country'
}).then(function(response){
app.country_data = response.data;
app.selstate = '';
app.state_data = '';
app.selcity = '';
app.city_data = '';
});
},
fetchState:function(){
axios.post("action.php", {
postRequest:'state',
country_id:this.selcountry
}).then(function(response){
app.state_data = response.data;
app.selstate = '';
app.selcity = '';
app.city_data = '';
});
},
fetchCity:function(){
axios.post("action.php", {
postRequest:'city',
state_id:this.selstate
}).then(function(response){
app.city_data = response.data;
app.selcity = '';
});
}
},
created:function(){
this.fetchCountry();
}
});
</script>
</body>
</html>
action.php
//action.php
<?php
$connect = new PDO("mysql:host=localhost;dbname=testingdb", "root", "");
$received_data = json_decode(file_get_contents("php://input"));
if($received_data->postRequest == 'country')
{
$query = "SELECT * FROM country ORDER BY country ASC";
}
if($received_data->postRequest == 'state')
{
$query = "SELECT * FROM state WHERE country_id = '".$received_data->country_id."' ORDER BY name ASC";
}
if($received_data->postRequest == 'city')
{
$query = "SELECT * FROM city WHERE stateid = '".$received_data->state_id."' ORDER BY cityname ASC";
}
$statement = $connect->prepare($query);
$statement->execute();
while($row = $statement->fetch(PDO::FETCH_ASSOC))
{
$data[] = $row;
}
echo json_encode($data);
?>
