Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015

Size: px

Start display at page:

Download "Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015"

Adele Francis
6 years ago
Views:

1 Page 1 of 7 TalkersCode.com HTML CSS JavaScript jquery PHP MySQL Web Development Tutorials Dynamic Select Option Menu Using Ajax And PHP. Wednesday, Mar 11, 2015 Share 4 Stum Tags:- Ajax jquery PHP MySQL In this tutorial we will help you to create a Dynamic Select Option Menu using Ajax and PHP. 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:

2 Page 2 of 7 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 = $user = $pass = 'localhost'; 'root'; ''; 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 </select> id="new_select"> </div> </center> </html> </body> 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. 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;

3 Page 3 of 7 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. 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. 10 Comment Found Abu Sufian ( Monday, Feb 29, 2016 )

4 Page 4 of 7 Thank You. it's easy and friendly. sabbir ( Wednesday, Mar 2, 2016 ) I want to test this shila ( Thursday, Mar 3, 2016 ) nice raul ( Friday, Mar 4, 2016 ) I did this several times, but it still without working, the second dropdown it's not filled by the first one, so what it's wrong, I need to do anything else?, please help me i'm desperate. rahul ( Tuesday, Feb 23, 2016 ) Nice article... ketan ( Saturday, Mar 5, 2016 ) it doesnt work, i also try that TalkersCode ( Saturday, Mar 5, 2016 ) Hi raul! Can you please post your code so i can check the problem and do you include jquery in your code TalkersCode ( Saturday, Mar 5, 2016 ) Hi Ketan and raul! can you please post your database scheme TalkersCode ( Saturday, Mar 5, 2016 ) Database Scheme Of Select Option Menu CREATE TABLE `places` ( `id` int(11) NOT NULL AUTO_INCREMENT, `state` text NOT NULL, `city` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=17 DEFAULT CHARSET=latin1 Hugo ( Friday, Mar 18, 2016 ) Hi, Thank you for sharing your code. Is it also possible to use it twice one page? Name Id Write Your Comment Post Comment Related Tutorials

5 Page 5 of 7 Mega DropDown Menu Like Ecommerce Using CSS Simple And Best DropDown Menu With Pure CSS And HTML Cool And Simple Vertical Accordion Menu Using jquery CSS and HTML Slide In and Slide Out Navigation Menu Using jquery And CSS

6 Page 6 of 7 Live Voting System Using Ajax And PHP Extract URL Data Like Facebook Using PHP,jQuery And Ajax Simple Add To Cart System Using jquery,ajax And PHP Create A Simple Instant Comment System Using Ajax

SEEM4570 System Design and Implementation. Lecture 4 AJAX and Demo

SEEM4570 System Design and Implementation Lecture 4 AJAX and Demo Prerequisite Please follow lecture note 3 up to P. 19 to set up your app environment. We build everything on top of it. In index.html,