[Help Need] Auto populating the Select box

**antony2kx** · 21.01.13, 01:01

Originally posted by asifnayem View Post

Hi,

I need a help regarding Auto populating the Select box upon selection. Like: I allow registration from 10 countries. Bangladesh, India, Pakistan, Japan, China.......
If any one select Bangladesh, then the next select box should show the cities of Bangladesh like dhaka, chittagong, khulna etc. and again if any one select india it should show the cities of india like: mumbai, delhi, chennai etc. and if they select the city then the next select box should show the areas name. I already have the lists of the areas on my DB.
Now I need help to do this. I can't make it by what I got from Google aunt. Please any one show me how to make it with php & jquery.

Regards.

php file to get the cities from the database

Code:

<?php
//get cities  
//getcity.php

if(isset($_POST['id']))
{
     $id = intval($_POST['id']);
    $query = mysql_query("SELECT * FROM cities WHERE country_id='".$id."'");
    if(mysql_num_rows($query)>0)
    {
        echo '<select name="cities" id="cities">';
         while($c=mysql_fetch_object($query))
         {  
             echo '<option value="'.$c->name.'">'.ucfirst($c->name).'</option>';
          }
        echo '</select>';
    }
}

?>

//html document with jquery as a dependency

Code:

<html>
<head>
          <title>Load select box</title>
          <script type="text/javascript" src="/resources/js/jquery.js"></script>
         <script type="text/javascript">
          $(document).ready(function(){
               
               $('#country').change(function(){
                    $.post('getcity.php', {id:$(this).val(), function(data){
                           if(data.length>0)
                           {
                                  $('#cities').html(data).fadeIn('slow'); //this will show the cities for that selected country
                           }
                   });
              });
        });
         </script>
</head>
<body>


<div id="form">
<form action="" method="post">
   <select name="country" id="country">
     <option value="1">India</option>
     <option value="2">Bangladesh</option>
    <!-- Add more here -->
  </select>
<div id="cities" style="display:none">
</div>
</form>

</div>




</body>
</html>

Wapcreate.com mobile site builder, wapcreator, wapbuilder, wap developer

**asifnayem** · 21.01.13, 03:06

I'm getting error. please check.

**antony2kx** · 21.01.13, 03:37

fixed

Code:

 
<script type="text/javascript">
          $(document).ready(function(){
               
               $('#country').change(function(){
                    $.post('getcity.php', {id:$(this).val()}, function(data){
                           if(data.length>0)
                           {
                                  $('#cities').html(data).fadeIn('slow'); //this will show the cities for that selected country
                           }
                   });
              });
        });
         </script>

**asifnayem** · 22.01.13, 01:42

I dont know why its not working

. my db structure: id, country id, city, area.
does it have to post the data? or it just if i select the country then the next box will appear auto?

[Help Need] Auto populating the Select box

[Help Need] Auto populating the Select box

Comment

Comment

Comment

Comment