How to cascade three dropdown using PHP and JS?

Question

I have a custom page template with three dropdown, the values of each dropdown is populate dynamically. Now, I want to cascade it. Whatever option the user choose in 1st dropdown, the values that under of that option will be displayed as an options in 2nd dropdown, same as in the 3rd dropdown.

I have a JS snippet, but the cascading of the three dropdown is not working

Snippet PHP:

<form action='' method='post' name='test' id='test'>
<div class="div-select">
<label for="list_position" id="idname">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.form)">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_location as $option){
        if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
            echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
        else    
         echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
     };
    ?>
</select>
</div>
<div class="div-select">
    <label for="list_position" id="idname">Position</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
        <?php
        foreach($query_location as $option){
            if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
                echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
            else    
             echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
         };
        ?>
    </select>
    </div>
<div class="div-select">
    <label for="list_position" id="idname">Position</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.form)">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
        <?php
        foreach($query_location as $option){
            if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
                echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
            else    
             echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
         };
        ?>
    </select>
    </div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>

Snippet JS:

function app_position(form){
    var val=form.list_position.options[form.list_position.options.selectedIndex].value; 
    self.location='page-resume-databank?list_position=' + val ;
}

function app_location(form){
    var val=form.list_position.options[form.list_position.options.selectedIndex].value; 
    var val2=form.list_location.options[form.list_location.options.selectedIndex].value; 

    self.location='page-namepage?list_location=' + val + '&list_processed=' + val2 ;
}

Answer 1

<form action='' method='post' name='resumeDatabank' id='resumeDatabank'>
<div class="div-select">
<label for="list_position" id="#ddress_search LABEL">Position</label>
<br/>
<select name="list_position" id="filterbypostion" onchange="app_position(this.value)">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_location as $option){
        if(isset($_POST['list_position']) && $_POST['list_position'] == $option->position)
            echo '<option name="list_position" class="filter_by" selected value="'.$option->position.'">'.$option->position.'</option>';
        else    
         echo '<option name="list_position" class="filter_by" value="'.$option->position.'">'.$option->position.'</option>';
     };
    ?>
</select>
</div>
<div class="div-select" id="show_street">
    <label for="list_position" id="#address_search LABEL">Street</label>
    <br/>
    <select name="list_position" id="filterbypostion">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>

    </select>
    </div>
<div class="div-select" id="show_roads">
    <label for="list_position" id="#address_search LABEL">Roads</label>
    <br/>
    <select name="list_position" id="filterbypostion">
        <option name="default" class="filter_by" selected="selected" value="Select by Position">Select Road</option>

    </select>
    </div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>

<script>
function app_position(city){
    //city is selected value of city drop down
    //give the correct path to you ajax.php
        $.ajax({
            type: "POST",
            url: 'ajax.php',
            data: "city="+city+"type=street" ,
            success: function(data)
            {
                $("#show_street").html(data);
            }
            });
}

function app_location(street){
    //street is selected value of street drop down
    //give the correct path to you ajax.php
        $.ajax({
            type: "POST",
            url: 'ajax.php',
            data: "street="+street+"type=roads" ,
            success: function(data)
            {
                $("#show_roads").html(data);
            }
            });

}
</script>

in you ajax.php file

<?php 

$type = $_POST['type'];//this type will load the relevant function.

if($type="street"){
    $city = $_POST['city'];
//now get the value of streets belongs to this city
$your_query = "Select * from street_table where city_id=$city";//you can modify this query according to your table

$res = mysql_query($your_query); 
?>
<label for="list_position" id="#address_search LABEL">Street</label>
    <br/>
    <select name="list_position" id="filterbypostion" onchange="app_location(this.value)">
<?php while($raws = mysql_fetch_assoc($res)){?>
<option name="default" class="filter_by" selected="selected" value="<?php echo $raws['street_id']?>"><?php echo $raws['street_name']?></option>
        <?php }//END OF WHILE?>
</select>
<?php }//END OF IF CHECcing street option

if($type="roads"){
        $street = $_POST['street'];
//now get the value of streets belongs to this city
$your_query_roads = "Select * from road_table where street_id=$street";////you can modify this query according to your table

$res_roads = mysql_query($your_query_roads); 
?>
<label for="list_position" id="#address_search LABEL">Street</label>
    <br/>

<?php while($raws_roads = mysql_fetch_assoc($res_roads)){?>
<input name="roads" type="radio" value="<?php echo $raws_roads['road_id'];?>">

        <?php }//END OF WHILE?>

<?php
    }
?>

Answer 2

You can do it in another way, the other two select box can be fetch from ajax request by posting which box you want , and the entire select box you can send from a component,

like :

$("#country").live("change", function(){

$.post("component.php", country:$(this).val(), function(data){

$("#state-div").html(data);

} });

and same for other two.