Populate a dropdown2 based on dropdown1
Here i am explaining the code for loading a state dropdown using country dropdown using angularjs and php.
Step1:create a database mytest_data and create 2 tables tbl_country and tbl_state. here country table is associated with
state table using country_id.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
CREATE TABLE IF NOT EXISTS `tbl_country` ( `id` int(10) NOT NULL, `country_name` varchar(100) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1; INSERT INTO `tbl_country` (`id`, `country_name`) VALUES (1, 'India'), (2, 'UAE'); CREATE TABLE IF NOT EXISTS `tbl_state` ( `id` int(10) NOT NULL, `state_name` varchar(100) NOT NULL, `country_id` int(10) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=latin1; INSERT INTO `tbl_state` (`id`, `state_name`, `country_id`) VALUES (1, 'Karnataka', 1), (2, 'Kerala', 1), (3, 'Abhudhabi', 2), (4, 'Sharja', 2); |
create the tables using the above code.
Step2:create two php files for loading state and country
loadcountry.php and loadstate.php as follows,
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 |
<?php $hostname = 'localhost'; $username = 'root'; $password = ''; $database = 'mytest_data'; $conn = mysql_connect($hostname,$username,$password); if(!$conn) { die("Error in connecting to database"); } $db = mysql_select_db($database,$conn); if(!$db) { die("Error in connecting to selecting database"); } $query_data = mysql_query("SELECT * from tbl_country",$conn); $rows = array(); while($r = mysql_fetch_assoc($query_data)) { $rows[] = $r; } echo json_encode($rows); ?> |
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 |
<?php $hostname = 'localhost'; $username = 'root'; $password = ''; $database = 'mytest_data'; $conn = mysql_connect($hostname,$username,$password); if(!$conn) { die("Error in connecting to database"); } $db = mysql_select_db($database,$conn); if(!$db) { die("Error in connecting to selecting database"); } $country_id=@$_GET['countryid']; $query_data = mysql_query("SELECT * from tbl_state where country_id=$country_id",$conn); $rows = array(); while($r = mysql_fetch_assoc($query_data)) { $rows[] = $r; } echo json_encode($rows); ?> |
Step3: create a file called index.php it contains the angular1 code for doing the dropdownbox loading and display.
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 |
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="angularApp" ng-controller="CountryCtrl"> <p>Select the Country</p> <select ng-model="selectedcountry" ng-change="update(selectedcountry);" ng-options="x.id as x.country_name for x in countrylist | orderBy:'country_name'"> <option value="">-- choose a country --</option> </select> <select ng-model="selectedstate" ng-options="x.id as x.state_name for x in statelist | orderBy:'state_name'"> <option value="">-- choose a state --</option> </select> </div> <script> var app=angular.module('angularApp',[]); app.controller('CountryCtrl', function($scope, $http) { $http.get("loadcountry.php").then(function (response) { $scope.countrylist = response.data; }); $scope.update = function(id){ $http.get("loadstate.php?countryid="+id).then(function (response) { $scope.statelist = response.data; }); }; }); </script> </body> </html> |