级联下拉菜单无法使用 JS

Question

我有一个包含 PHP 和 JS 的文件。在这个文件中，我有 3 个下拉菜单，我尝试应用级联但它不起作用。当我在第一个下拉菜单中选择一个选项时，第二个下拉菜单没有任何价值。

如何解决这个问题？

用于下拉菜单的 PHP：

<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

在 page-resume-databank.php 中以选择形式回显输出，然后 ajax 中的响应只是附加到第二个下拉列表中。 ajax 后不需要 .each 函数

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 响应回显如下

   $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

你的代码错了

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

您为 filterbyposition 添加事件，代码 jQuery('#filterbylocation').html('') 设置为 2nd dropdown 没有值。

改成jQuery('#filterbyposition').html('')