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>");
}

这是用于获取speicies的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>");
}

除了物种1之外，所有动态下拉列表都有效。我已经看了好几个小时并调试了我能做的所有事情，并且无法理解为什么选项没有填充在物种下拉列表中。我已经隔离了对loadSpecies.php的调用，并且它返回了正确的物种选项列表。 JavaScript运行时没有错误。控制台中没有错误。

我希望另一组眼睛可能会看到我在这里失踪的东西。提前谢谢！

get_Species的代码： function get_species（$ genus_id）{ 全球$数据库; $ sql = $ database-＆gt; query（“SELECT id，species_name FROM species where genus_id =”。$ database-＆gt; escape_value（$ genus_id）。“ORDER BY species_name”）; $ speciesArray = array（）; while（$ row = $ sql-＆gt; fetch_assoc（））{ $ speciesArray [$ row ['id']] = $ row ['species_name']; } return $ speciesArray; }

Answer 1

用户错误！我在我的php中有一个require语句，其中包含一个具有id的物种的其他HTML - 一个模糊的id引用。我将id更改为另一个名称并且有效。

上一次下拉列表在以前的下拉列表中不起作用

1 个答案: