In this post we will create dependent dropdown using vuejs and php mysql.For ajax request we will use vuejs axios js. We will create three dependent dropdown for the country,state,city and send Ajax request to fetch record whenever value changes with vuejs and PHP.
Step 1 : Create HTML File And Add Below Code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dynamic Dependent Dropdown with Vue.js and PHP</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<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="app">
<div class="container">
<h4 class="text-success">Dynamic Dependent Dropdown with Vue.js and PHP</h4>
<div class="panel panel-primary">
<div class="panel-heading">Dynamic Dependent Dropdown with Vue.js and PHP</div>
<form class="form-horizontal">
<div class="panel-body">
<div class="form-group">
<label class="control-label col-sm-2">Select Country:</label>
<div class="col-sm-5">
<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>
<div class="form-group">
<label class="control-label col-sm-2">Select State:</label>
<div class="col-sm-5">
<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>
<div class="form-group">
<label class="control-label col-sm-2">Select City:</label>
<div class="col-sm-5">
<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>
</div>
</form>
</div>
</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('request.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('request.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('request.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 2 : Create PHP File request.php.
<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "dbname";
$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);
?>