Populate multiple dropdown lists using Ajax, jQuery, PHP and MySQL BIT UCSC UoM Classes Colombo Sri Lanaka

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.

Ref http://www.mitrajit.com/populate-multiple-dropdown-lists-using-ajax-jquery-php-mysql/

bit project class bit project guidelines bit project proposal sample bit project sample bit project schedule
bit project qub bit project management bitcoin projected value bitbucket projects bit project vle bit project help bit project topics 16 bit audiophile project 8 bit alu project report 2 bit alu project 4 bit adder project 4 bit alu project micro bit accelerometer project 8 bit project riz and yoshi bit project beograd
bitbucket project key bitbucket project management micro bit breadboard project micro bit bluetooth project bitcoin project ppt bitcoin project report 4 bit calculator project 8 bit computer project
4 bit counter project bitbucket create project clone project from bitbucket how to delete project from bitbucket 8 bit darling project reaper project bit depth 32 bit microsoft project download http //bit.ly/project dishari after effects project bit depth drake bit project pat but darling project 32 bit ms project free download fixed bid project micro bit project game bit.ly/project learn hse bit heroes project
little bit project ideas bit final year project ideas 2 bit project jump up and down micro bit project kits
bit.ly/project key bbc micro bit project kit bit.ly/project scorpio server 7 micro bit led project bit-tech.net project logs bit project meaning bit mesra project project bitmap 2-bit project - make u dance 64 bit microsoft project 32 bit ms project 2010 download 64 bit project navigator micro bit new project bitbucket change project name bitbucket create new project bit of project management micro bit project pdf drill bit project pdf how to push project to bitbucket bit ranchi project position project bit rate
2-bit project - rock the house yaule micro bit radio project micro bit robot project the bit rot project obs project bitrate project bit stuffing bit.ly/project scorpion micro bit save project bit open source project
router bit storage project 64 bit project visual studio bit town project upload project to bitbucket ucsc bit project universal bit project v bit cnc projects micro bit watch project w bot project 64 bit xcode project  logic pro x project bit depth bit final year project project zomboid bit 11 bit project 8 32 bit project 2013 2 bit project 2 bit calculator project 2 bit magnitude comparator project project 32 bit download project 32 bit error 4 bit microprocessor projects project 64 bit project 64 bit 2016 8-bit projection mapping 8 bit microcontroller projects 8 bit cpu projects