✖

All TalkersCode Topics

Follow TalkersCode On Social Media

Dynamic Select Option Menu Using Ajax And PHP

Last Updated : Apr 15, 2022

IN - Ajax jQuery PHP MySQL

In this tutorial we will help you to create a Dynamic Select Option Menu using Ajax and PHP. You may also like floating navigation menu using HTML and CSS.

Dynamic Select Option Menu Using Ajax And PHP

CHECK OUT THIS TUTORIAL LIVE DEMO →

To create a dynamic select option menu using Ajax and PHP it takes only three steps:-

  1. Make a PHP file and define markup and script for select option menu
  2. Make a CSS file and define styling for select option menu
  3. Connect to the database and Send data

Step 1. Make A PHP file and define markup and script for select option menu

We make a PHP file and save it with a name select.php 

<html>
<head>
<link rel="stylesheet" type="text/css" href="select_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
function fetch_select(val)
{
 $.ajax({
 type: 'post',
 url: 'fetch_data.php',
 data: {
  get_option:val
 },
 success: function (response) {
  document.getElementById("new_select").innerHTML=response; 
 }
 });
}

</script>

</head>
<body>
<p id="heading">Dynamic Select Option Menu Using Ajax and PHP</p>
<center>
<div id="select_box">
 <select onchange="fetch_select(this.value);">
  <option>Select state</option>
  <?php
  $host = 'localhost';
  $user = 'root';
  $pass = '';
  mysql_connect($host, $user, $pass);
  mysql_select_db('demo');

  $select=mysql_query("select state from places group by state");
  while($row=mysql_fetch_array($select))
  {
   echo "<option>".$row['state']."</option>";
  }
 ?>
 </select>

 <select id="new_select">
 </select>
	  
</div>     
</center>
</body>
</html>

In this step we get the states from our places table and insert in our first select option menu then we use onchange event which call the fetch_select(); function which passes an ajax request to fetch_data.php and gets the result and insert in our second select option menu.

You may also like slide in navigation menu using jQuery and CSS.

Step 2. Make a CSS file and define styling for select option menu

We make a CSS file and save it with name select_style.css. 

body
{
 background-color:#E6E6E6;
 font-family:helvetica;
}
#heading
{
 text-align:center;
 margin-top:150px;
 font-size:30px;
 color:blue;
}
#select_box
{
 width:500px;
 background-color:#819FF7;
 padding:10px;
 height:200px;
 border-radius:5px;
 box-shadow:0px 0px 10px 0px grey;
}
select
{
 width:400px;
 height:50px;
 border:1px solid #BDBDBD;
 margin-top:20px;
 padding:10px;
 font-size:20px;
 color:grey;
 border-radius:5px;
}

Step 3. Connect to the database and Send data

We make a PHP file save it with a name fetch_data.php which is used to connect and fetch data and then send data to select.php file on ajax request. 

<?php
if(isset($_POST['get_option']))
{
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('demo');

 $state = $_POST['get_option'];
 $find=mysql_query("select city from places where state='$state'");
 while($row=mysql_fetch_array($find))
 {
  echo "<option>".$row['city']."</option>";
 }
 exit;
}
?>

It gets the value send by ajax request and then find all the cities related that state value and then it send back all the cities to search.php file.

You may also like responsive navigation menu.

Thats all, this is how to create a dynamic select option menu using ajax and PHP. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials