Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

Dynamic Select Option Menu Using Ajax And PHP.

Thursday, Sep 28, 2017

Tags:- 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.


See Demo
Select Option Menu


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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.