I have a list of dropdowns that are base off the previous one. They pull their data based on the selection of the previous selection and populate the next dropdown. I am using the same code, but for some reason, it is not working on the last one. Here is the 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();
});
});
});
});
Here is the 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>
Here is loadGenus.php for getting the genus:
$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>");
}
Here is loadSpecies.php for getting the speicies:
$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>");
}
All of the dynamic dropdowns work except for the species one. I have looked at this for hours and debugged everything I can and cannot see why the options are not being populated in the species dropdown. I have isolated the call to loadSpecies.php and it returns with the correct list of species options by itself. The JavaScript runs with no errors. No errors in the console.
I am hoping another set of eyes might see something I am missing here. Thank you in advance!
code for get_Species: function get_species($genus_id) { global $database; $sql = $database->query("SELECT id, species_name FROM species where genus_id = ".$database->escape_value($genus_id)." ORDER BY species_name"); $speciesArray = array(); while ($row = $sql->fetch_assoc()) { $speciesArray[$row['id']] = $row['species_name']; } return $speciesArray; }
