AngularJS Multiselect Dropdown List using PHP & MySQL

Multiselect Dropdown lists are very user friendly which allows to make multiple selection from dropdown list. In our previous tutorial you have learned how to implement Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP and get huge response from our readers. Many of them requested tutorial to implement Multiselect Dropdown list with AngularJS. So in this tutorial you will learn how to implement AngularJS Multiselect Dynamic Dropdown list using PHP & MySQL. The tutorial covered in easy steps with live demo to display dynamic multiselect dropdown list from MySQL database table and link to download source code of live demo.



As we have covered this tutorial with live demo to create AngularJS Multiselect Dropdown list using PHP & MySQL, so the file structure for this example is following.

• index.php


• multiselect.js


• app.js


• getData.php

Steps1: Create MySQL Database Table
As we will load dropdown list dynamically from MySQL database table, first we will create MySQL database table employee using below query and insert few records to display in dropdown list.

CREATE TABLE `employee` (
`id` int(11) NOT NULL COMMENT 'primary key',
`employee_name` varchar(255) NOT NULL COMMENT 'employee name',
`employee_salary` double NOT NULL COMMENT 'employee salary',
`employee_age` int(11) NOT NULL COMMENT 'employee age'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;



Steps2: Include Bootstrap, AngulaJS and CSS Files
We will implement this example with Bootstrap and AngularJS, so we will include files related to these. We will also include Multiselect Angular Module to handle multi select functionality in dropdown list.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script src="multiselect.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css" />



Steps3: Design Dropdown List with Angular Application and Conroller
We will desgin dropdown list in index.php with Angular Application and Controller. The HTML for the multiselect list handled with mulitselect.js using multiselect.tmpl.html. The employee names listed in dropdown list dynamically.
<div class="container" ng-app="multiselect_app" ng-controller="multiselect_controller">
<h2>AngularJS Multiselect Dropdown using PHP & MySQL</h2>
<h4>View Details of Employee</h4>
<multiselect class="input-xlarge" multiple="true"
ng-model="selectedEmp"
options="c.name for c in emp_list"
change="selected()" ></multiselect>
{{selectedEmp}}
</div>


Steps4: Load Dropdown List Dynamically
Now in app.js, we will Ajax request to getData.php to get employee data and assign to emp_list to display in index.php..
(function(angular) {
'use strict';
var app = angular.module('multiselect_app', ['ui.multiselect']);
app.controller('multiselect_controller', function($scope, $http) {
$scope.emp_list = '';
$http.get('getData.php').success(function(empData){
$scope.emp_list = empData;
});
});
})(angular);


Steps5: Get Data from MySQL Database
Finally we will get employee records from MySQL database table employee and store in an array and return in JSON format.
<?php
$sql = "SELECT id,employee_name as name FROM employee LIMIT 20";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
$emp_data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$emp_data[] = $rows;
}
echo json_encode($emp_data);
exit;
?>


Now we have created multiselect dropdown list with dynamic data. The dropdown list return select items data in JSON format to implement further according to your requirement.

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]