Dharamart: Dependent Drop Down (DDD)

<select onchange="selectCity(this.options[this.selectedIndex].value)" name="country">
                                <option value="-1">Select country</option>
                                <?php
                                while($rowCountry=mysql_fetch_array($resCountry)){
                                    ?>
                                    <option value="<?php echo $rowCountry['id']?>"><?php echo $rowCountry['country_name']?></option>
                                    <?php
                                }
                                ?>
                            </select>

                                <select id="state_dropdown" onchange="selectState(this.options[this.selectedIndex].value)" name="state">
                                <option value="-1">Select state</option>
                            </select>

$sqlCountry="select id,country_name from country order by country_name asc ";
$resCountry=mysql_query($sqlCountry);
$checkCountry=mysql_num_rows($resCountry);
?>
<!DOCTYPE html>
<html>
<head>
<?php include("include/import_data.php"); ?>
<title>Drain | Net</title>

<script type="text/javascript" src="js/jquery1-1.4.1.min.js"></script>
<script type="text/javascript">
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>");
    }
}

function selectState(state_id){
    if(state_id!="-1"){
        loadData('city',state_id);
    }else{
        $("#city_dropdown").html("<option value='-1'>Select city</option>");
    }
}

function loadData(loadType,loadId){
    var dataString = 'loadType='+ loadType +'&loadId='+ loadId;
    $("#"+loadType+"_loader").show();
    $("#"+loadType+"_loader").fadeIn(400).html('Please wait... <img src="image/loading.gif" />');
    $.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>

loadData.php

<?php
    include("includes/db.php");
    include("includes/functions.php");
error_reporting(E_ERROR | E_PARSE);

$loadType=$_POST['loadType'];
$loadId=$_POST['loadId'];

if($loadType=="state"){
    $sql="select id,state_name from state where country_id='".$loadId."' order by state_name asc";
}else{
    $sql="select id,city_name from city 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;
}
?>

Dharamart

Tuesday, October 21, 2014

Dependent Drop Down (DDD)

No comments:

Post a Comment