javascript - 最后一个下拉菜单无法根据前一个下拉菜单工作

Question

我有一个基于前一个下拉列表的列表。他们根据先前选择的选择提取数据并填充下一个下拉列表。我使用相同的代码，但由于某种原因，它不适用于最后一个。这是 JavaScript:

$(document).ready( function() { 
    $("#order").change(function() {
        $(this).after('<div id="loader"><img src="img/ajax-loader.gif" alt="loading subcategory" /></div>');
        $.get('loadFamilies.php?order=' + $(this).val(), function(data) {
            $("#family").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    }); 

    $("#family").change(function() {
        $(this).after('<div id="loader"><img src="img/ajax-loader.gif" alt="loading subcategory" /></div>');
        $.get('loadSubFamilies.php?family=' + $(this).val(), function(data) {
            $("#subfamily").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    }); 

    $("#subfamily").change(function() {
        $(this).after('<div id="loader"><img src="img/ajax-loader.gif" alt="loading subcategory" /></div>');
        $.get('loadGenus.php?subfamily=' + $(this).val(), function(data) {
            $("#genus").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    }); 

    $("#genus").change(function() {
        $(this).after('<div id="loader"><img src="img/ajax-loader.gif" alt="loading subcategory" /></div>');
        $.get('loadSpecies.php?genus=' + $(this).val(), function(data) {
            $("#species").html(data);
            $('#loader').slideUp(200, function() {
                $(this).remove();
            });
        }); 
    }); 
});

这是 HTML:

<form method="get">
    <label for="order">Order</label>
    <select name="order" id="order">
        <option value="0">Select an Order</option>
        <?php 
            $orders = get_ID_and_name_of_orders();
            foreach($orders as $key => $value) { ?>
                <option value="<?php echo $key; ?>"><?php echo $value; ?></option>
        <?php } ?>
    </select>
    <br/><br/>

    <label>Family</label>
    <select name="family" id="family"></select><br/><br/>
    <label>Sub Family</label>
    <select name="subfamily" id="subfamily"></select><br/><br/>
    <label>Genus</label>
    <select name="genus" id="genus"></select><br/><br/>
    <label>Species</label>
    <select name="species" id="species"></select><br/><br/>
</form>

这是用于获取属的 loadGenus.php:

$subfamily = $_GET['subfamily'];
$genus = get_genus($subfamily); // from database
echo("<option value='0'>Select a Genus (optional)</option>");
foreach($genus as $key => $value) {
    echo("<option value='$key'>$value</option>");
}

这是用于获取物种的 loadSpecies.php:

$genus = $_GET['genus'];
$species = get_species($genus);
echo("<option value='0'>Select a Species (optional)</option>");
foreach($species as $key => $value) {
    echo("<option value='$key'>$value</option>");
}

除物种外，所有动态下拉菜单均有效。我已经研究了几个小时并调试了我能做的一切，但不明白为什么这些选项没有填充在物种下拉列表中。我已经隔离了对 loadSpecies.php 的调用，它本身返回了正确的物种选项列表。 JavaScript 运行没有错误。控制台中没有错误。

我希望另一双眼睛能看到我在这里错过的东西。预先感谢您!

get_Species 的代码: 函数 get_species($genus_id) { 全局$数据库； $sql = $database->query("从物种中选择 id，物种名称，其中 genus_id = ".$database->escape_value($genus_id)。"按物种名称排序"); $speciesArray = 数组(); while ($row = $sql->fetch_assoc()) { $speciesArray[$row['id']] = $row['species_name']; } 返回$speciesArray；}

Answer 1

用户错误!我的 php 中有一个 require 语句，其中包含其他 HTML，其中包含一个带有物种 id 的元素——一个不明确的 id 引用。我将 id 更改为另一个名称并且成功了。