selected value display for checkbox from dropdownlist

[malatamil]

i have 2 tables, first is main category will display in dropdownlist, and second is subcategory chexboxes.
i have a problem in this. need to display subcategory while selecting any maincategory from dropdownlist id to display subcategory.
category table:
state:<select name"category" id="category">
<option value="0">...select state...</option>
<option value="karnataka">karnataka</option>
<option value="Tamilnadu">Tamilnadu</option>
<option value="kerala">kerala</option>
</select>

subcategory table:
inside karnataka i have data's like
bangalore
mysore
tumkur
mangalore etc

inside Tamilnadu
chennai
coimbatore
madurai
salem etc

inside kerala
kochin
pallkad etc
these values i added in diff table by using first table id.

if i select state as karnataka then that related cities are display in checkbox. i know this will done by using ajax.but i have no idea about ajax. so please post some sample coding for this or any suggestion

[pzuurveen]

You can find many tutorials about that on the web.
Here is one

[malatamil]

Thanks pzuurveen
this will work for checkbox? i will try this

[malatamil]

am getting only country names. if i click one country in second dropdown box is showing empty. if i did wrong in this Any one can suggestion me.

index.php

<script type="text/javascript" src="../js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">

/*This function is called when state dropdown value change*/
function selectState(state_id){
  if(state_id!="-1"){
    loadData('city',state_id);
  }else{
    $("#city_dropdown").html("<option value='-1'>Select city</option>");
  }
}

/*This function is called when city dropdown value change*/
function selectCity(country_id){
 if(country_id!="-1"){
   loadData('state',country_id);
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }else{
  $("#state_dropdown").html("<option value='-1'>Select state</option>");
   $("#city_dropdown").html("<option value='-1'>Select city</option>");
 }
}

/*This is the main content load function, and it will
     called whenever any valid dropdown value changed.*/
function loadData(loadType,loadId){
  var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
  $("#"+loadType+"_loader").show();
  $("#"+loadType+"_loader").fadeIn(400).
        html('Please wait... ');
  $.ajax({
     type: "POST",
     url: "loaddata.php",
     data: dataString,
     cache: false,
     success: function(result){
       $("#"+loadType+"_loader").hide();
       $("#"+loadType+"_dropdown").
       html("<option value='-1'>Select "+loadType+"</option>");
       $("#"+loadType+"_dropdown").append(result);
     }
   });
}
</script>
<!--This code will show country dropdown list-->

<form name="fname" method="post" enctype="multipart/form-data">
<select onchange="selectCity(this.options[this.selectedIndex].value)">
   <option value="-1">Select country</option>
   <?php include("db.php"); 

  $sql = "SELECT ct.`id`, ct.`country_name`,s.`id`, s.`state_name`, s.country_id,c.`id`, c.`city_name`, c.`state_id`  FROM `country_test` ct 
  JOIN state_test s ON ct.id=s.country_id 
  JOIN city_test c ON s.id=c.state_id 
  GROUP BY ct.`country_name`";
  echo "hhh".$resCountry = mysql_query($sql);
     while($rowCountry = mysql_fetch_array($resCountry)){
   ?>
     <option value="<?php echo $rowCountry['id']?>">
            <?php echo $rowCountry['country_name']?>
     </option>
   <?php
   }
   ?>
</select>

<!--State dropdown list
--><select id="state_dropdown"
     onchange="selectState(this.options[this.selectedIndex].value)">
<option value="-1">Select state</option>
</select>
<span id="state_loader"></span>

<!--City dropdown list
--><select id="city_dropdown">
<option value="-1">Select city</option>
</select>
</form>
<span id="city_loader"></span>

loaddata.php

<?php include('db.php');
$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="state"){
   $sql="SELECT `id`, `state_name` FROM `state_test` where
         country_id='".$loadId."' order by state_name asc";
}else{
   $sql="SELECT `id`, `city_name` FROM `city_test` where
         state_id='".$loadId."' order by city_name asc";
}
$res=mysql_query($sql);
$check=mysql_num_rows($res);
if($check > 0){
   $HTML="";
   while($row=mysql_fetch_array($res)){
      $HTML.="<option value='".$row['id']."'>".$row['1']."</option>";
   }
   echo $HTML; 
}
?>