Dependent Dropdown Using PHP,JQUERY&AJAX

                              
                               Now Connect to  Database using the following code. Create a config.php file to store the database connection and add the following code:

                       <?php
                        $conn=mysql_connect("localhost","root","");
                        Mysql_select_db("jw",$conn)
                         ?>

    Now take p1.php file and copy the following Code.


                     <script type="text/javascript" src="jquery.1.10.js"></script>
                        <script type="text/javascript" language="javascript">
                                    $(document).ready(function() {
                           $("#state").change(function() {
                       var sid=$(this).val();
                               $.ajax({
                            method:"POST",
                            url:"p2.php",
                            data:{stateid:sid},
                            success:function(msg1)
                                                   {
           
                                                  $('.citiesdiv').show();
                                                  $('.citiesdiv').html(msg1);
                                                     }
 
                                      });

                                                                });

                                                                         });


                               </script>

                                 <?php
                               include("config.php");

                                      $sql="select * from states";
                                      $res=mysql_query($sql);
                                   ?>


                        <form method="Post">
                        <select id="state">
                    <option value="">Select State</option>
                   <?Php while($row=mysql_fetch_array($res) ) { ?>
                 <option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?></option>
                             <?php } ?>
                     </select>
                        </form>



                     <div class="citiesdiv" style="display:none;"></div>
                     </body>


</html>

-----------------------------------------------------------------------------------------------------------------------

                           Now Take p2.php and Add the following code


<script type="text/javascript" src="jquery.1.10.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".getdist").change(function() {
var sid1=$(this).val();

$.ajax({
method:"POST",
url:"p3.php",
data:{cityid:sid1},

success:function(msg1)
          {
              
           $('.townsdiv').show();
            $('.townsdiv').html(msg1);
          }
 
});

});
    });

</script>

<?php
    include("config.php");



$sid=$_POST['stateid'];
 $sql="select cid,name  from cities where sid='$sid'";
$qur2=mysql_query($sql);

?>


<form method="post">
<select id="getdist">
<option value="">Select City</option>
<?Php while($row=mysql_fetch_array($res) ) { ?>
<option value="<?php echo $row[0]; ?>"><?php echo $row[1]; ?></option>
<?php } ?>
</select>
</form>



<div class="citiesdiv" style="display:none;"></div>
</body>


</html>
-------------------------------------------------------------------------------                                                           Now Take p3.php and add the following code


<?php

include("config.php");
$sid1=$_POST['cityid'];
$sql="select * from towns where cid='$sid1'";
$qur2=mysql_query($sql);

?>

<form method="post">
<select class='gettown'>
<option>Select town</option>
<?php while($row1 = mysql_fetch_array($qur2)){ ?>
<option value="<?php echo $row1[0]; ?>"><?php echo $row1[1]; ?></option>
<?php } ?>
</select>

</form>

          IS THIS HELP FULL................................................?

11:11 Share: