By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,506 Members | 1,891 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,506 IT Pros & Developers. It's quick & easy.

Dynamic Drop Down Lists using PHP/MySQL/AJAX

P: 1
Hi everyone,

I am trying to make three dynamic drop down lists. When I say dynamic I mean when I choose a value from the first one, the second one changes options and when I choose a value from the second one then the third one changes options. But at the end I want the to keep the selected values because I will submit them. For example the first list may be Country, the second one may be City and the third one Postal Code. So once I choose country I want the cities in that country to be visible and again once I choose city I want postal code to be visible, buy I do not want to loose my selections every time because I will submit them at the end. I was able to make it up to two drop down menus and it works perfect, but once I add the third everything is destroyed.
Take a look at my code for the first two menus and if you can help me I will really appreciate it

Expand|Select|Wrap|Line Numbers
  1. <!doctype html public "-//w3c//dtd html 3.2//en">
  2.  
  3. <html>
  4.     <head>
  5.         <title>Multiple drop down list box from plus2net</title>
  6.         <SCRIPT language=JavaScript>
  7.             function reload(form)
  8.             {
  9.             var val=form.cat.options[form.cat.options.selectedIndex].value;
  10.             self.location='dropmenutest.php?cat=' + val ;
  11.             }
  12.         </script>
  13.     </head>
  14.  
  15.     <body>
  16.         <?php
  17.             require_once("../../dbconnection.php");
  18.         ?>
  19.  
  20.         <?php
  21.             @$cat=$_GET['cat'];
  22.             if(strlen($cat) > 0 and is_numeric($cat))
  23.             { // to check if $cat is numeric data or not. 
  24.             echo "Data Error";
  25.             exit;
  26.             }
  27.  
  28. // Getting the data from Mysql table for first list box
  29.             $quer2=mysql_query("SELECT DISTINCT PARK FROM PARK");
  30.  
  31. // for second drop down list we will check if category is selected else we will display all the subcategory//
  32.             if(isset($cat) and strlen($cat) > 0){
  33.             $test="SELECT DISTINCT Room FROM Rooms where AREA = '";
  34.             $test = $test . $cat . "'";
  35.             $quer=mysql_query("$test"); 
  36.             }else{$quer=mysql_query("SELECT DISTINCT Room FROM Rooms"); } 
  37.  
  38.             echo "<form method=post name=f1 action='dd-check.php'>";
  39. // Add your form processing page address to action in above line. Example  action=dd-check.php
  40. // Starting of first drop downlist
  41.             echo "<select name='cat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
  42.             while($noticia2 = mysql_fetch_array($quer2)) { 
  43.             if($noticia2['PARK']==@$cat){echo "<option selected value='$noticia2[PARK]'>$noticia2[PARK]</option>"."<BR>";}
  44.             else{echo  "<option value='$noticia2[PARK]'>$noticia2[PARK]</option>";}
  45.             }
  46.             echo "</select>";
  47.  
  48. //Starting of second drop downlist
  49.             echo "<select name='subcat' onchange=\"reload(this.form)\"><option value=''>Select one</option>";
  50.             while($noticia = mysql_fetch_array($quer)) { 
  51.             echo  "<option value='$noticia[Room]'>$noticia[Room]</option>";
  52.             }
  53.             echo "</select>";
  54.  
  55. //Starting of the third drop downlist
  56.             echo "<select name='subcat'><option value=''>Select one</option>";
  57.             while($noticia = mysql_fetch_array($quer)) { 
  58.             echo  "<option value='$noticia[Room]'>$noticia[Room]</option>";
  59.             }
  60.             echo "</select>";
  61.  
  62.  
  63. //Add your other form fields as needed here
  64.             echo "<input type=submit value=Submit>";
  65.             echo "</form>";
  66.         ?>
  67.  
  68.         <?php
  69.             require("../../disconnect.php")
  70.         ?>    
  71.     </body>
  72. </html>
  73.  
Feb 24 '11 #1
Share this Question
Share on Google+
4 Replies


100+
P: 1,059
If you dont understand AJAX

you can follow this example

In your source file you can simply create the SELECT drop down list. and in ajax reply you can add the return in the proper value as HTML.
Feb 25 '11 #2

dgreenhouse
Expert 100+
P: 250
You are not using Ajax in your code example.

If you want to use your existing code; which would be simpler than Ajax, you'll need to send the value(s) of all of the DropDown (Combobox) elements with each reload.

Expand|Select|Wrap|Line Numbers
  1. This:
  2. # var val=form.cat.options[form.cat.options.selectedIndex].value;
  3. #             self.location='dropmenutest.php?cat=' + val ;
  4.  
  5. Should change to something like this:
  6.  
  7. # populate vars
  8. val1=form.cat.options[form.cat.options.selectedIndex].value;
  9. val2=form.subcat1.options[form.subcat1.options.selectedIndex].value;
  10. val3=form.subcat2.options[form.subcat2.options.selectedIndex].value;
  11.  
  12. self.location='dropmenutest.php?cat=' + val1 + '&subcat1=' + val2 + '&subcat2=' + val3 ;
  13.  
  14.  
Then your PHP code should test for the existence and validity of all of the arguments and variably perform the sql queries.

i.e.
1- if cat1 is invalid; reset all dropdowns
2- if cat1 is valid and subcat1 and subcat2 are both invalid; keep the value of cat1, perform sql on cat1, and populate subcat1, subcat2's value is reset
3- if cat1 is valid and subcat1 is valid; keep the values of cat1 and subcat1, perform sql on subcat1, and populate subcat2
4- if cat1, subcat1, and subcat2 are valid; complete whatever logic is appropriate.
Feb 26 '11 #3

P: 1
You can simply do this by using jquery .ajax(). Just send the first drop-down value with onChange() function and fetch the data from db and display the response. You can find a well explained example here:

http://www.x-developer.com/php-scrip...shing-the-page
Apr 9 '12 #4

P: 93
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <head>
  3.         <script type="text/javascript">
  4.                 var http = false;
  5.                 if(navigator.appName == "Microsoft Internet Explorer")
  6.                 {
  7.                     http = new ActivexObject("Microsoft.XMLHTTP");
  8.                 }
  9.                 else
  10.                 {
  11.                     http = new XMLHttpRequest();
  12.                 }
  13.  
  14.                 function get_city(str)
  15.                 {
  16.                         if(str == "India")
  17.                         {
  18.                                 var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='Mumbai'>Mumbai</option><option value='Delhi'>Delhi</option><option value='Kolkata'>Kolkata</option></select>";
  19.                         }
  20.                         if(str == "Japan")
  21.                         {    
  22.                             var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='japan_city1'>Japan City 1</option><option value='japan_city2'>Japan City 2</option><option value='japan_city3'>Japan City 3</option></select>";
  23.                         }
  24.                         if(str == "USA")
  25.                         {    
  26.                             var city_list = "<select name='city' onChange='get_zipcode(this.value)'><option value='usa_city1'>usa City 1</option><option value='usa_city2'>usa City 2</option><option value='usa_city3'>USA City 3</option></select>";
  27.                         }                        
  28.                         document.getElementById("city_area").innerHTML=city_list;
  29.                 }
  30.  
  31.                 function get_zipcode(str1)
  32.                 {
  33.  
  34.                         /* India city selection */
  35.                         if(str1 == "Mumbai")
  36.                         {
  37.                                 var zipcode_list = "<select name='zipcode' ><option value='123456'>123456</option><option value='123123'>123123</option><option value='978871'>978871</option></select>";
  38.                         }
  39.                         if(str1 == "Delhi")
  40.                         {    
  41.                                 var zipcode_list = "<select name='zipcode' ><option value='000001'>000001</option><option value='000002'>000002</option><option value='00003'>00003</option></select>";
  42.                         }
  43.                         if(str1 == "Kolkata")
  44.                         {    
  45.                                 var zipcode_list = "<select name='zipcode' ><option value='000004'>000004</option><option value='000005'>000005</option><option value='00006'>00006</option></select>";
  46.                         }                        
  47.  
  48.                         /* Japan city selection */
  49.                         if(str1 == "japan_city1")
  50.                         {
  51.                                 var zipcode_list = "<select name='zipcode' ><option value='japanCode 1'>japanCode 1</option><option value='japanCode 2'>japanCode 2</option><option value='japanCode 3'>japanCode 3</option></select>";
  52.                         }
  53.                         if(str1 == "japan_city2")
  54.                         {    
  55.                                 var zipcode_list = "<select name='zipcode' ><option value='9454545'>japan city code 2</option></select>";
  56.                         }
  57.                         if(str1 == "japan_city3")
  58.                         {    
  59.                                 var zipcode_list = "<select name='zipcode' ><option value='99999'>99999</option><option value='88888'>888888</option><option value='666666'>666666</option></select>";
  60.                         }                        
  61.  
  62.                         /* USA city selection */
  63.                         if(str1 == "usa_city1")
  64.                         {
  65.                                 var zipcode_list = "<select name='zipcode' ><option value='11111'>11111</option><option value='j222222'>222222</option><option value='333333'>333333</option></select>";
  66.                         }
  67.                         if(str1 == "usa_city2")
  68.                         {    
  69.                                 var zipcode_list = "<select name='zipcode' ><option value='13212121'>j1321321312</option></select>";
  70.                         }
  71.                         if(str1 == "usa_city3")
  72.                         {    
  73.                                 var zipcode_list = "<select name='zipcode' ><option value='54545454'>454545</option><option value='21212121'>132132132</option><option value='854545'>8545421</option></select>";
  74.                         }                                                
  75.  
  76.                         document.getElementById("zipcode_area").innerHTML=zipcode_list;
  77.                 }
  78.  
  79.         </script>
  80.     </head>
  81.         <body>
  82.         <div id="m1"></div>
  83.                     <form name="form1" method="post" >
  84.                             <table>
  85.                                     <tr>
  86.                                             <th>Country</th>
  87.                                             <td>
  88.                                                     <select name="country" id="country" onChange="get_city(this.value)">
  89.                                                         <option value="0">Select Country</option>
  90.                                                         <option value="India">India</option>
  91.                                                         <option value="Japan">Japan</option>
  92.                                                         <option value="USA">USA</option>
  93.                                                     </select>
  94.                                             </td>
  95.                                     </tr>
  96.                                     <tr>
  97.                                             <th>City</th>
  98.                                             <td>
  99.                                                     <div id="city_area">                                                                                                    
  100.                                                         <select name="city" id="city">
  101.                                                                 <option value="0">Select City</option>
  102.                                                         </select>
  103.                                                     </div>
  104.                                             </td>
  105.  
  106.                                     </tr>
  107.                                     <tr>
  108.                                             <th>Zipcode</th>
  109.                                             <td>
  110.                                                 <div id="zipcode_area">                                                                                                
  111.                                                     <select name="zip_code" id="zip_code">
  112.                                                             <option value="0">Select Zip Code</option>
  113.                                                     </select>
  114.                                                 </div>
  115.                                             </td>
  116.                                     </tr>                                    
  117.                             </table>
  118.                     </form>
  119.         </body>
  120. </html>
  121.  

===> it is only static as you can get ideas .... how to work it.....
if you wanna change the values from database then make it with php and mysql

Bharat Parmar(Bharat383)
Apr 14 '12 #5

Post your reply

Sign in to post your reply or Sign up for a free account.