By and large, Unique Ward Select Box is utilized for auto-populate a dropdown list on Dependant information. At the point when you select one drop-down box esteem it will recover new Dependant information from data set table. for the most part you see for a nation, state and city table. At the point when you select country then the state will fill on select box choice of the chose country. Same with respect to city.
As we probably are aware this undertaking can perform utilizing jquery ajax, without jquery ajax we can't perform in light of the fact that we need to refresh select box esteem on in view of progress occasion.
Along these lines, in this post we will make Dynamic Ward Dropdown utilizing vue js and php mysql. for ajax demand we will utilize axios js. it is great work with vuejs. fundamentally, we will make "nations", "states" and "urban areas" table. Then, at that point, we will make three dropdown nation, state and city. After that we will compose php code for getting information from data set table, so compose sql inquiry and back-end rationale.
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.
0 comments:
Post a Comment
Thanks