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

Recommended Answers

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

Jump to Post

All 3 Replies

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

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

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; 
}
?>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.