You want to select one drop-down box then data will appear in the second drop-down. How it possible? It is very simple. Here we are going to tell you, how to get a relative drop-down menu or dynamic select options menu using Ajax, PHP, and MySQL.
For creating a dynamic select options menu using Ajax and PHP we will use only three steps.
- Make a PHP file(.php) for writing html script of select option menu
- Make a CSS file(.css) for attractive design and define styles for body, display box and select option menu
- Make a PHP file(.php) for creating a connection with phpmyadmin database
Step 1. Make a PHP file(.php) for writing html script of select option menu
In this step, we will make a PHP file in dream viewer or another editor with .php extension after that we will save it with a name of dropdown.php
In this file, we will get value from a first drop-down menu and we will pass this value to fetchFunction() function by onchange event. fetchFunction() function will pass an ajax request to fetchRecords.php file and it will get the result from fetchRecords.php file in function (response) after that it will insert ajax result in our second select options menu.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href=" style.css">
<script type="text/javascript">
function fetchFunction(val)
{
$.ajax({
type: 'post',
url: 'fetchRecords.php',
data: {
fetch_value:val
},
success: function (response) {
document.getElementById("newSelectMenu").innerHTML=response;
}
});
}
</script>
</head>
<body>
<center>
<div id="selectBox">
<p id="blog_heading">How to get database records on select option menu using ajax and PHP</p>
<select onchange="fetchFunction(this.value);">
<option>Select option</option>
<?php
if($_SERVER['SERVER_NAME'] == 'localhost' || $_SERVER['SERVER_NAME'] == '127.0.0.1' )
{
$db = mysqli_connect('localhost','root','','db_name') or die('Error connecting to MySQL server.');
}
else
{
$db = mysqli_connect('servername','username,'password','db_name') or die('Error connecting to MySQL server.');
}
$query=mysqli_query($db, "select * from tablename");
while($row=mysqli_fetch_array($query))
{
echo "<option>".$row['title']."</option>";
}
?>
</select>
<select id="newSelectMenu"></select>
</div>
</center>
</body>
</html>
Step 2. Make a CSS file(.css) for attractive design and define styles for body, display box and select option menu
We will make a CSS file for an eye-catching look and we will save it with the name of style.css.
body
{
background-color:#efeff5;
font-family:Arial, Helvetica, sans-serif;
font-weight: normal;
font-variant: small-caps;
}
#blog_heading
{
text-align:center;
font-size:25px;
color:white;
}
#selectBox
{
margin-top:150px;
width:500px;
background-color:#39004d;
color:white;
padding:10px;
height:250px;
border-radius:5px;
box-shadow:0px 0px 10px 0px #c933ff;
}
select
{
width:400px;
height:50px;
border:1px solid #39004d;
margin-top:20px;
padding:10px;
font-size:16px;
color:#c933ff;
border-radius:5px;
}
Step 3. Make a PHP file(.php) for creating a connection with phpmyadmin database
Now we will make a PHP file for connecting to a database and fetching records from a database and we will save it with a name of fetchRecords.php. This PHP file will get records from the database by Ajax request.
<?php
if(isset($_POST['fetch_value']))
{
if($_SERVER['SERVER_NAME'] == 'localhost' || $_SERVER['SERVER_NAME'] == '127.0.0.1' )
{
$db = mysqli_connect('localhost','root','','db_name') or die('Error connecting to MySQL server.');
}
else
{
$db = mysqli_connect('servername','username,'password','db_name') or die('Error connecting to MySQL server.');
}
$requireValue = $_POST['fetch_value'];
$query=mysqli_query($db, "select * from tablename where title='$requireValue'");
while($row=mysqli_fetch_array($query))
{
echo "<option>".$row['category']."</option>";
}
exit;
}
?>
