Interlinked Dropdowns with options from MySQL database table

On selection of option of first dropdown list ( category ) , the options from second drop down list ( sub-category ) will change to match the selected option. ( The second drop down list is dependant on first drop down list )






Selected category = {{category}} , Selected cat_id = {{category.cat_id}}
Selected subcategory = {{subcategory}} , Selected subcat_id = {{subcategory.subcat_id}}
<div ng-app="my_app" ng-controller="my_ctrl" >
<select  ng-model="category" ng-options="x.category for x in details" ng-change="onChange()">
</select>
<select   ng-model="subcategory" ng-options="x.subcategory for x in subcat | filter:check_id">
</select>
<br><br><br><br>
<span>Selected category = {{category}}</span> , 
<span>Selected cat_id = {{category.cat_id}}</span>
<br>
<span>Selected subcategory = {{subcategory}}</span> , 
<span>Selected subcat_id = {{subcategory.subcat_id}}</span>
</div>
<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
  $http.get("dd-data.php") // data source for options 
  .then(function (response) {$scope.details = response.data.category_data;});
  
  $http.get("dd-data2.php") // data source for options 
  .then(function (response2) {$scope.subcat = response2.data.subcategory_data;});
////  
$scope.id=null;
 $scope.onChange = function()
{
 $scope.id=$scope.category.cat_id;
 
} 
////

$scope.check_id = function(subcat){
	if($scope.id >0){
	return (subcat.cat_id == $scope.id); 
	}
	return true // display all options if nothing is selected
	
}; 
///////
});
</script>

Using filters

On selection of options from first list, onChange event is triggered and filter is applied for selection of options for second drop down list.
DEMO: Filtering Options using functions

Options Data source

Both the drop down lists are using JSON formatted string as data source.

Using MySQL database.

This source can be taken from MySQL database and output can be JSON strings. The SQL dump of category and subcategory tables
DEMO: Options using JSON format DEMO: Options from MySQL database

Using PDO

The variable $dbo is declared inside the database connection file config.php, read more on PDO connection and config file here.
<?php
require "config.php"; // database connection 

$sql="SELECT  cat_id, category FROM category"; 
$row=$dbo->prepare($sql);
$row->execute();
$result=array('category_data'=>$row->fetchAll(PDO::FETCH_ASSOC));

echo json_encode($result); 
?>
You can check the output ( in JSON format ) of dd-data.php file here for category and dd-data2.php for subcategory.

Using MySQLi connection

Read more about MySQLi and database connection here. All details of data base connection is kept inside config.php file.
<?php
require "config.php"; // database connection 
$result = $connection->query("SELECT subcat_id,cat_id,subcategory  FROM subcategory");
$row = array();
while($rs = $result->fetch_array(MYSQLI_ASSOC)) {
$row[] = $rs;
}
echo json_encode(array("subcategory_data"=>$row));

$connection->close();
?>
Drop down List Box
DEMO: Options using JSON format DEMO: OnChange Event

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer