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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | //index.html<!DOCTYPE html> <html> <head> <title>AngularJS PHP Mysql Dynamic Dropdown List</title> <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> |
1 2 3 4 5 6 7 8 9 10 11 12 | //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); ?> |
1 2 3 4 5 6 7 8 9 10 11 12 13 | //load_state.php<?php $connect = mysqli_connect("localhost", "root", "", "testingdb"); $output = array(); $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); ?> |
