Populate multiple dropdown lists using Ajax, jQuery, PHP and MySQL

Some readers often asking me how to generate or populate more than one dropdown list or multiple select boxes using Ajax. So, In this tutorial, I will show you how to generate or populate multiple dropdown lists using Ajax, jQuery, PHP, and MySQL.


Let’s think a situation where the user has to submit a form where he/she has to fill up the form by selecting continent, country, state, and city. Country list is dependent on the selection of continent, state list is dependent on the selection of the country list and so on. All this dynamically generated select or dropdown options are using Ajax so that no page refresh or reload is required.

If you want to populate only one dropdown list based on selection of another dropdown option, please read this article — populate a dropdown list based on selection of another dropdown option using ajax

Database Tables

1. CREATE TABLE `continents` (
2. `continent_id` int(11) NOT NULL AUTO_INCREMENT,
3. `continent` varchar(255) NOT NULL,
4. PRIMARY KEY(`continent_id`)
5. )
7. CREATE TABLE `countries` (
8. `country_id` int(11) NOT NULL AUTO_INCREMENT,
9. `country` varchar(255) NOT NULL,
10. `continent_id` int(11) NOT NULL COMMENT 'continent_id from the continents table',
11. PRIMARY KEY(`country_id`)
12. )
14. CREATE TABLE `states` (
15. `state_id` int(11) NOT NULL AUTO_INCREMENT,
16. `state` varchar(255) CHARACTER SET latin1 NOT NULL,
17. `country_id` int(11) NOT NULL COMMENT 'country_id from the countries table',
18. PRIMARY KEY(`state_id`)
19. )
21. CREATE TABLE `cities` (
22. `city_id` int(11) NOT NULL AUTO_INCREMENT,
23. `city` varchar(255) NOT NULL,
24. `state_id` int(11) NOT NULL COMMENT 'state_id from the states table',
25. PRIMARY KEY(`city_id`)
26. )

Download the complete source code for sample data for the above tables.

Database Connection (db.php)

1. <?php
2. define('HOSTNAME','localhost');
3. define('DB_USERNAME','DATABASE_USERNAME');
4. define('DB_PASSWORD','DATABASE_PASSWORD');
5. define('DB_NAME', 'DATABASE_NAME');
7. $con = mysqli_connect(HOSTNAME, DB_USERNAME, DB_PASSWORD, DB_NAME) or die ("error");
8. // Check connection
9. if(mysqli_connect_errno($con)) echo "Failed to connect MySQL: " .mysqli_connect_error();
10. ?>

The above PHP code is responsible for establishing the database connection with MySQL. Change the database name, username, and password with your credentials.

HTML – Populate Multiple Dropdown Lists (index.php)

1. <?php include('db.php'); ?>
3. <div class="container-fluid">
4. <div class="row">
6. <div class="col-xs-12 col-md-sm-6 col-md-3">
7. <label>Continent :</label>
8. <select name="continent" class="form-control" id="continent">
9. <option value=''>------- Select --------</option>
10. <?php
11. $sql = "select * from `continents`";
12. $res = mysqli_query($con, $sql);
13. if(mysqli_num_rows($res) > 0) {
14. while($row = mysqli_fetch_object($res)) {
15. echo "<option value='".$row->continent_id."'>".$row->continent."</option>";
16. }
17. }
18. ?>
19. </select>
20. </div>
22. <div class="col-xs-12 col-md-sm-6 col-md-3">
23. <label>Country :</label>
24. <select name="country" class="form-control" id="country" disabled="disabled"><option>------- Select --------</option></select>
25. </div>
28. <div class="col-xs-12 col-md-sm-6 col-md-3">
29. <label>State / Province / County :</label>
30. <select name="state" class="form-control" id="state" disabled="disabled"><option>------- Select --------</option></select>
31. </div>
34. <div class="col-xs-12 col-md-sm-6 col-md-3">
35. <label>City / Popular Place :</label>
36. <select name="city" class="form-control" id="city" disabled="disabled"><option>------- Select --------</option></select>
37. </div>
38. </div>
39. </div>

Only for the continent dropdown list the list of continents will be generated through the PHP code on page load or page refresh.

Ajax – Populate Multiple Dropdown Lists using Ajax (mtb.js)

1. $(document).ready(function() {
3. //Change in continent dropdown list will trigger this function and
4. //generate dropdown options for county dropdown
5. $(document).on('change','#continent', function() {
6. var continent_id = $(this).val();
7. if(continent_id != "") {
8. $.ajax({
9. url:"get_data.php",
10. type:'POST',
11. data:{continent_id:continent_id},
12. success:function(response) {
13. //var resp = $.trim(response);
14. if(response != '') {
15. $("#country").removeAttr('disabled','disabled').html(response);
16. $("#state, #city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
17. } else {
18. $("#country, #state, #city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
19. }
20. }
21. });
22. } else {
23. $("#country, #state, #city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
24. }
25. });
28. //Change in coutry dropdown list will trigger this function and
29. //generate dropdown options for state dropdown
30. $(document).on('change','#country', function() {
31. var country_id = $(this).val();
32. if(country_id != "") {
33. $.ajax({
34. url:"get_data.php",
35. type:'POST',
36. data:{country_id:country_id},
37. success:function(response) {
38. //var resp = $.trim(response);
39. if(response != '') {
40. $("#state").removeAttr('disabled','disabled').html(response);
41. $("#city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
42. }
43. else $("#state, #city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
44. }
45. });
46. } else {
47. $("#state, #city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
48. }
49. });
53. //Change in state dropdown list will trigger this function and
54. //generate dropdown options for city dropdown
55. $(document).on('change','#state', function() {
56. var state_id = $(this).val();
57. if(state_id != "") {
58. $.ajax({
59. url:"get_data.php",
60. type:'POST',
61. data:{state_id:state_id},
62. success:function(response) {
63. if(response != '') $("#city").removeAttr('disabled','disabled').html(response);
64. else $("#city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
65. }
66. });
67. } else {
68. $("#city").attr('disabled','disabled').html("<option value=''>------- Select --------</option>");
69. }
70. });
71. });

The above jQuery and Ajax code are responsible for generating or populating the multiple dropdown lists.

PHP – Fetch Data From MySQL Database (get_data.php)

1. <?php include('db.php');?>
3. <?php
5. if (isset($_POST['continent_id'])) {
7. $qry = "select * from countries_new where continent_id=".mysqli_real_escape_string($con,$_POST['continent_id'])." order by country";
8. $res = mysqli_query($con, $qry);
9. if(mysqli_num_rows($res) > 0) {
10. echo '<option value="">------- Select -------</option>';
11. while($row = mysqli_fetch_object($res)) {
12. echo '<option value="'.$row->country_id.'">'.$row->country.'</option>';
13. }
14. } else {
15. echo '<option value="">No Record</option>';
16. }
18. } else if(isset($_POST['country_id'])) {
20. $qry = "select * from states_new where country_id=".mysqli_real_escape_string($con,$_POST['country_id'])." order by state";
21. $res = mysqli_query($con, $qry);
22. if(mysqli_num_rows($res) > 0) {
23. echo '<option value="">------- Select -------</option>';
24. while($row = mysqli_fetch_object($res)) {
25. echo '<option value="'.$row->state_id.'">'.$row->state.'</option>';
26. }
27. } else {
28. echo '<option value="">No Record</option>';
29. }
31. } else if(isset($_POST['state_id'])) {
33. $qry = "select * from cities where state_id=".mysqli_real_escape_string($con,$_POST['state_id'])." order by city";
34. $res = mysqli_query($con, $qry);
35. if(mysqli_num_rows($res) > 0) {
36. echo '<option value="">------- Select -------</option>';
37. while($row = mysqli_fetch_object($res)) {
38. echo '<option value="'.$row->city_id.'">'.$row->city.'</option>';
39. }
40. } else {
41. echo '<option value="">No Record</option>';
42. }
43. }
45. ?>

Based on the continent_id, coutry_id and state_id, data will fetch from the database respectively.

Complete Source Code – Populate Multiple Dropdown Lists Using Ajax

Download the complete source code from the below Download link. Also, you can try the live demo on Populate Multiple Dropdown Lists Using from the below Demo link. Please like and share this tutorial with others.

Download Source Code