javascript - menus - El menú desplegable de Cascade no funciona con JS

menu desplegable vertical html

Question

Tengo un archivo con PHP y JS. En este archivo tengo 3 listas desplegables, traté de aplicar la cascada, pero no está funcionando. Cuando elijo una opción en el primer menú desplegable, el segundo menú desplegable no tiene ningún valor.

¿Cómo arreglar esto?

PHP para desplegable:

<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

En la página-resume-databank.php repite el resultado en forma de selección y luego la respuesta en el ajax solo se agrega para el segundo menú desplegable. no es necesario. Cada función después de ajax

solicitud ajax

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 como se muestra a continuación

   $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

Tu código es incorrecto

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

Agrega evento para filterbyposition, el código jQuery (''# filterbylocation''). Html ('''') se establece 2ndo menú desplegable abajo no tiene ningún valor.

Cámbielo a jQuery (''# filterbyposition''). Html ('''')