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 ;
}

can you show some example of data you want to get. is it some think like this vehicle Make -> Toyota(first drop down list all vehicle make), vehicle model -> Yaris(second drop down which have all the model of Toyota).is your idea is some thing smiler to this? — Mujahidh
– Mujahidh, Commented May 18, 2016 at 8:11
yes. E.g. City -> Street (all street that have in the City) -> Road Name (all road name under that street) — User014019
– User014019, Commented May 18, 2016 at 8:42
Hope you have city in one table,streets with city in another table,road name with street id in another table right? — Mujahidh
– Mujahidh, Commented May 18, 2016 at 8:46
No, I have one table for city and have only one table for streets and road name — User014019
– User014019, Commented May 18, 2016 at 8:48

Mujahidh · Accepted Answer · 2016-05-18 10:07:42Z

<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
    }
?>

Hitesh Jangid · Accepted Answer · 2016-05-18 09:06:34Z

0

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.

answered May 18, 2016 at 9:06

Hitesh Jangid

2103 silver badges10 bronze badges

1 Comment

User014019 Over a year ago

what is component.php? my PHP and JS file is written only in one file

Collectives™ on Stack Overflow

How to cascade three dropdown using PHP and JS?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related