multiple drop down list in php using ajax

Today, We want to share with you multiple drop down list in php using ajax.In this post we will show you dynamic drop down list in php using ajax, hear for how to select multiple options from a drop down list in php.

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

we will give you demo and example for implement.In this post, we will learn about Country State City Drop Down List Using JavaScript with an example.

Step 1: Database Tables

CREATE TABLE `universities` (
  `univercity_id` int(11) NOT NULL AUTO_INCREMENT,
  `univercity` varchar(255) NOT NULL,
  PRIMARY KEY(`univercity_id`)
) 
CREATE TABLE `departments` (
  `department_id` int(11) NOT NULL AUTO_INCREMENT,
  `department` varchar(255) NOT NULL,
  `univercity_id` int(11) NOT NULL COMMENT 'univercity_id from the universities table',
  PRIMARY KEY(`department_id`)
)
CREATE TABLE `branchs` (
  `branch_id` int(11) NOT NULL AUTO_INCREMENT,
  `branch` varchar(255) CHARACTER SET latin1 NOT NULL,
  `department_id` int(11) NOT NULL COMMENT 'department_id from the departments table',
  PRIMARY KEY(`branch_id`)
) 
CREATE TABLE `tasks` (
  `task_id` int(11) NOT NULL AUTO_INCREMENT,
  `task` varchar(255) NOT NULL,
  `branch_id` int(11) NOT NULL COMMENT 'branch_id from the branchs table',
   PRIMARY KEY(`task_id`)
)

Step 2: Database Connection (db.php)

Step 3: HTML – Populate Multiple Dropdown Lists (index.php)

  

    

      Univercity :
      
        ------- Select --------
         0) {
          while($row = mysqli_fetch_object($res)) {
            echo "".$row->univercity."";
          }
        }
        ?>
      
    
    

      Department :
      ------- Select --------
    
    

      Branch :
      ------- Select --------
    
    

      Task :
      ------- Select --------
    
  

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

$(document).ready(function() {
  //Change in univercity dropdown list will trigger this function and
  //generate dropdown options for branch dropdown
  $(document).on('change','#univercity', function() {
    var univercity_id = $(this).val();
    if(univercity_id != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{univercity_id:univercity_id},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("#department").removeAttr('disabled','disabled').html(response);
            $("#branch, #task").attr('disabled','disabled').html("------- Select --------");
          } else {
            $("#department, #branch, #task").attr('disabled','disabled').html("------- Select --------");
          }
        }
      });
    } else {
      $("#department, #branch, #task").attr('disabled','disabled').html("------- Select --------");
    }
  });
  //Change in branch dropdown list will trigger this function and
  //generate dropdown options for branch dropdown
  $(document).on('change','#department', function() {
    var department_id = $(this).val();
    if(department_id != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{department_id:department_id},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("#branch").removeAttr('disabled','disabled').html(response);
            $("#task").attr('disabled','disabled').html("------- Select --------");
          }
          else $("#branch, #task").attr('disabled','disabled').html("------- Select --------");
        }
      });
    } else {
      $("#branch, #task").attr('disabled','disabled').html("------- Select --------");
    }
  });
  //Change in branch dropdown list will trigger this function and
  //generate dropdown options for task dropdown
  $(document).on('change','#branch', function() {
    var branch_id = $(this).val();
    if(branch_id != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{branch_id:branch_id},
        success:function(response) {
          if(response != '') $("#task").removeAttr('disabled','disabled').html(response);
          else $("#task").attr('disabled','disabled').html("------- Select --------");
        }
      });
    } else {
      $("#task").attr('disabled','disabled').html("------- Select --------");
    }
  });
});

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

 0) {
    echo '------- Select -------';
    while($row = mysqli_fetch_object($res)) {
      echo ''.$row->department.'';
    }
  } else {
    echo 'No Record';
  }
} else if(isset($_POST['department_id'])) {
  $qry = "select * from branchs_new where department_id=".mysqli_real_escape_string($con,$_POST['department_id'])." order by branch";
  $res = mysqli_query($con, $qry);
  if(mysqli_num_rows($res) > 0) {
    echo '------- Select -------';
    while($row = mysqli_fetch_object($res)) {
      echo ''.$row->branch.'';
    }
  } else {
    echo 'No Record';
  }
} else if(isset($_POST['branch_id'])) {
  $qry = "select * from tasks where branch_id=".mysqli_real_escape_string($con,$_POST['branch_id'])." order by task";
  $res = mysqli_query($con, $qry);
  if(mysqli_num_rows($res) > 0) {
    echo '------- Select -------';
    while($row = mysqli_fetch_object($res)) {
      echo ''.$row->task.'';
    }
  } else {
    echo 'No Record';
  }
}
?>

I hope you get an idea about multiple drop down list in php using ajax.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.