最后一个下拉菜单不能基于上一个下拉菜单工作答案

【问题标题】：Last dropdown not working base on previous dropdown最后一个下拉菜单不能基于上一个下拉菜单工作
【发布时间】：2016-02-27 23:21:20
【问题描述】：

我有一个基于前一个的下拉列表。他们根据先前选择的选择提取数据并填充下一个下拉列表。我正在使用相同的代码，但由于某种原因，它不适用于最后一个。这是 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("SELECT id, species_name FROM species where genus_id = ".$database->escape_value($genus_id)." ORDER BY species_name"); $speciesArray = 数组（）；而 ($row = $sql->fetch_assoc()) { $speciesArray[$row['id']] = $row['species_name']; } 返回 $speciesArray; }

【问题讨论】：

听起来很酷的项目
这里没有 SQL 查询我假设你使用函数 get_species() 我们可以看到这个函数吗？
好的，为 get_species 添加代码
我看不出有什么问题，我以后可能会去上班！

标签： javascript php jquery html drop-down-menu

【解决方案1】：

用户错误！我在我的 php 中有一个 require 语句，其中包括其他 HTML，该 HTML 具有一个带有物种 id 的元素 - 一个模棱两可的 id 引用。我将 id 更改为另一个名称，它起作用了。

【讨论】：