Cascade dropdown not working using JS

Question

I have one file with PHP and JS. In this file I have 3 dropdowns, I tried to apply the cascading but it's not working. When I choose an option in the first dropdown, the 2nd dropdown down have no value.

How to fix this?

PHP for dropdown:

<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="filterbyposition">
    <option name="default" class="filter_by" selected="selected" value="Select by Position">Select by Position</option>
    <?php
    foreach($query_position 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_location" id="#ddress_search LABEL">Location</label>
<br/>
<select name="list_location" id="filterbylocation">
    <option name="default" class="filter_by" selected="selected" value="Select by Location">Select by Location</option>
    <?php
    foreach($query_locations as $option){
        if(isset($_POST['list_location']) && $_POST['list_location'] == $option->hiring_location)
            echo '<option name="list_location" class="filter_by" selected value="'. $option->hiring_location .'">'. $option->hiring_location .'</option>';
        else
         echo '<option name="list_location" class="filter_by" value="'. $option->hiring_location.'">'. $option->hiring_location .'</option>';
     };
    ?>
</select>
</div>
<div class="div-select">
<label for="list_processed" id="#ddress_search LABEL">Processed</label>
<br/>
<select name="list_processed" id="filterbyprocessed">
    <option name="default" class="filter_by" selected="selected" value="Select by Processed">Select by Processed</option>
    <?php
    foreach($query_processed as $option){
        if(isset($_POST['list_processed']) && $_POST['list_processed'] == $option->processed_option)
            echo '<option name="list_processed" class="filter_by" selected value="'. $option->processed_option .'">'. $option->processed_option .'</option>';
        else
         echo '<option name="list_processed" class="filter_by" value="'. $option->processed_option.'">'. $option->processed_option .'</option>';
     };
    ?>
</select>
</div>
<div class="div-input">
<input type="submit" value="Search" class="div-input-submit"/>
</div>
</form>

JS:

    jQuery("#filterbyposition").live('change',function() {
    var selectVal = jQuery('#filterbyposition :selected').val();
    alert(selectVal);
    var $output = jQuery('#filterbylocation').html('');

    jQuery.ajax({
        url: 'page-resume-databank.php',
        data: "n="+selectVal,
        dataType: 'json',
        success: function(data){
            jQuery.each(data, function(key,value){
                $output.append("<option value='"+value.id+"'>"+value.filterbylocation+"</option>");
            });
        } 
    });
});

Answer 1

In page-resume-databank.php echo the output in select form and then the response in the ajax just append for second drop down. no need of .each function after ajax

ajax request

var strURL="findStateing.php?platform="+xx;
var req = getXMLHTTP();
if (req) {
   req.onreadystatechange = function() {
      if (req.readyState == 4) {
      // only if "OK"
      if (req.status == 200) {                      
         document.getElementById('statediv').innerHTML=req.responseText;
      } else {
      alert("Problem while using XMLHTTP:\n" + req.statusText);
   }
}               
}           
req.open("GET", strURL, true);
req.send(null);
}

findStateing.php respone echo as below

   $xx=$_GET['platform'];
    <select name="amount" id="amount" class="form-control" required>
        <?php $query=mysql_query("SELECT * FROM table WHERE xx='$xx'");
            while($result=mysql_fetch_array($query)){ ?>
            <option value="<?php echo $result['pv'];?>"><?php echo $result['pv'];?> PV &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<?php if(strlen($result['pv']) < 4) { echo "&nbsp;&nbsp;"; }?>MYR <?php echo $result['rm'];?></option>
        <?php } ?>
    </select>

Answer 2

Your code is wrong

jQuery("#filterbyposition").live('change',function() {
    var selectVal = jQuery('#filterbyposition :selected').val();
    alert(selectVal);
    *var $output = jQuery('#filterbylocation').html('');*

You add event for filterbyposition, the code jQuery('#filterbylocation').html('') is set 2nd dropdown down have no value.

Change it to jQuery('#filterbyposition').html('')