jQuery 3 dropdown menu - onChange

Question

I have three populated drop down menus. Each drop down menu is populated based on the choice of the previous selection. This means that the choices of "selector 2" are based on the choices of "selector 1", while the choices of "selector 3" are based on the choices of "selector 2". The drop down menu is populated dynamically using jquery, and the source is from a MySQL table.

When I select "selector 1", it populates "selector 2" and when I select "selector 2" it populates "selector 3". This works fine. The problem lies that if I have "selector 1", "selector 2" and "selector 3" selected, and I change "selector 1", the value of "selector 2" is lost (how it should be), but the value of "selector 3" is remaining there. I want the selector value of 3 to be reset when "selector 1" is changed and not retain the old value of the previous old selector.

This is my jquery

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>

    function getTertiary(val) {
        $.ajax({
            type: "POST",
            url: "get_tertiary.php",
            data:'tertiary_cat='+val,
            success: function(data){
                $("#tertiary_cat").html(data);
            }
        });
    }


    function getSecondary(val) {
        $.ajax({
            type: "POST",
            url: "get_secondary.php",
            data:'primary_cat='+val,
            success: function(data){
                $("#secondary_cat").html(data);
            }
        });
    }

    function selectPrimary(val) {
        $("#search-box").val(val);
        $("#suggesstion-box").hide();
    }
</script>

This is my html:

<div class="frmDronpDown">
    <div class="row">
        <label>Primary:</label><br/>
        <select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">
            <option value="">Select Primary</option>
            <?php
            foreach($results as $primaryCat) {
                ?>
                <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
                <?php
            }
            ?>
        </select>
    </div>
    <div class="row">
        <label>Tertiary:</label><br/>
        <select name="secondary_cat" id="secondary_cat" class="demoInputBox" onChange="getTertiary(this.value);">
            <option value="">Select Seconary</option>
        </select>
    </div>
    <div class="row">
        <label>State:</label><br/>
        <select name="tertiary_cat" id="tertiary_cat" class="demoInputBox">
            <option value="">Select Tertiary</option>
        </select>
        <input type="text"/>
    </div>
</div>

When I tried - to change

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);">

to:

<select name="primary_cat" id="primary_cat" class="demoInputBox" onChange="getSecondary(this.value);getTertiary(this.value);">

I am getting this error in error_log

PHP Warning:  Invalid argument supplied for foreach()

Answer 1

Might be value of $results is not A array so add a check here will solve your problem

 <?php
 if (is_array($results)){
    foreach($results as $primaryCat) {
        ?>
            <option value="<?php echo $primaryCat["primary_cat"]; ?>"><?php echo $primaryCat["primary_cat"]; ?></option>
        <?php
    }

 }
 ?>

Answer 2

Reset the value of the third DDown on Re stetting the second one like this :

function getSecondary(val) {
    $.ajax({
        type: "POST",
        url: "get_secondary.php",
        data:'primary_cat='+val,
        success: function(data){
            $("#secondary_cat").html(data);
             $("#tertiary_cat").html('<option value="">Select Tertiary</option>')
        }
    });

}

Answer 3

you can change getSecondary to clear the 3rd drop down when primary is changed like this:

function getSecondary(val) {
    $.ajax({
        type: "POST",
        url: "get_secondary.php",
        data:'primary_cat='+val,
        success: function(data){
            $("#secondary_cat").html(data);
            $('#tertiary_cat').html('<option value="">Select Tertiary</option>')
        }
    });
}