Bootstrap 4.0 Version
https://getbootstrap.com/docs/4.0/getting-started/introduction/
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
CREATE TABLE `countries` (
`id` int(6) NOT NULL,
`value` varchar(250) NOT NULL DEFAULT ''
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `countries` (`id`, `value`) VALUES
(1, 'Afghanistan'),
(171, 'Philippines'),
(227, 'United States of America');
ALTER TABLE `countries`
ADD PRIMARY KEY (`id`);
ALTER TABLE `countries`
MODIFY `id` int(6) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=228;
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;
index.html
//index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS PHP Mysql Dynamic Dropdown List</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
</head>
<body>
<div class="container" style="width:650px;">
<h3 align="center">AngularJS PHP Mysql Dynamic Dropdown List</h3>
<br />
<div ng-app="appdynamicdropdown" ng-controller="CTRdynamicdropdown" ng-init="loadCountry()">
<select name="country" ng-model="country" class="form-control" ng-change="loadState()">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.id}}">{{country.value}}</option>
</select>
<br />
<select name="state" ng-model="state" class="form-control">
<option value="">Select State</option>
<option ng-repeat="state in states" value="{{state.id}}">
{{state.name}}
</option>
</select>
</div>
</div>
<script>
var app = angular.module("appdynamicdropdown",[]);
app.controller("CTRdynamicdropdown", function($scope, $http){
$scope.loadCountry = function(){
$http({
method: 'GET',
url: 'load_country.php'
}).then(function (data){
console.log(data)
$scope.countries = data.data;
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.loadState = function(){
$http({
method: 'POST',
url: 'load_state.php',
data: { country_id: $scope.country }
}).then(function (data){
console.log(data)
$scope.states = data.data;
},function (error){
console.log(error, 'can not post data.');
});
}
});
</script>
</body>
</html>
load_country.php
//load_country.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testingdb");
$output = array();
$query = "SELECT * FROM countries ORDER BY value ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
load_state.php
//load_state.php
<?php
$connect = mysqli_connect("localhost", "root", "", "testingdb");
$output = array();
$data = json_decode(file_get_contents("php://input"));
$query = "SELECT * FROM state WHERE country_id='".$data->country_id."' ORDER BY name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
