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.
CHECK OUT THIS TUTORIAL LIVE DEMO →
To create a dynamic select option menu using Ajax and PHP it takes only three steps:-
- Make a PHP file and define markup and script for select option menu
- Make a CSS file and define styling for select option menu
- 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.
Latest Tutorials
- Create Animated Skill Bar Using jQuery, HTML And CSS
- Simple And Best Responsive Web Design Using CSS Part 2
- Show Button On Hover Using HTML And CSS
- Material Design Login Form Using jQuery And CSS
- Animated Progress Bar Using jQuery And CSS
- Dynamic Drop Down Menu Using jQuery, Ajax, PHP And MySQL
- Get Website Statistics Using PHP, jQuery And MySQL
- HTML5 Login And Signup Form With Animation Using jQuery
- Facebook Style Homepage Design Using HTML And CSS
- View Webpage In Fullscreen Using jQuery