Sharing Top Content from the Angular-sphere.

How to Auto-populate Dropdown with AngularJS and PHP

How to Auto-populate Dropdown with #AngularJS and #PHP

  • By creating dynamic dependent dropdown the user is restricted to select an item to view data on another dropdown element.
  • According to the state selected from the first dropdown auto-populate users list in the second dropdown.
  • In the first dropdown added state name in options.
  • To auto-populate data on second dropdown on option selection added  and .
  • In this tutorial, I auto-populated data on the dropdown element but you can use any other HTML element e.g. textbox, textarea.

Dynamic dependent dropdown restricts the user to select an item to view data on another dropdown element. It is common in country and state selection in the form. In this tutorial, I am using $http service in AngularJS to send request to fetch records from MySQL database with PHP according to first dropdown selection.

By creating dynamic dependent dropdown the user is restricted to select an item to view data on another dropdown element.

Based on each selection data is changed in the dropdown.

The common example of this – country and state element in the form. According to the selected country state is been auto-populated.

I am using $http service in AngularJS to send a request to fetch records from MySQL database with PHP.

In the demonstration, I am creating two dropdowns – state and users. According to the state selected from the first dropdown auto-populate users list in the second dropdown.

table in the example.

CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `name` varchar(80) NOT NULL, `email` varchar(80) NOT NULL, `state` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

 to define database connection.

Completed Code

state; $result = mysqli_query($con,”SELECT id,name FROM users WHERE state=”.$state);…

How to Auto-populate Dropdown with AngularJS and PHP