javascript - Last dropdown not working base on previous dropdown -
i have list of dropdowns base off previous one. pull data based on selection of previous selection , populate next dropdown. using same code, reason, not working on last one. here 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 html:
<form method="get"> <label for="order">order</label> <select name="order" id="order"> <option value="0">select order</option> <?php $orders = get_id_and_name_of_orders(); foreach($orders $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 loadgenus.php getting genus:
$subfamily = $_get['subfamily']; $genus = get_genus($subfamily); // database echo("<option value='0'>select genus (optional)</option>"); foreach($genus $key => $value) { echo("<option value='$key'>$value</option>"); }
here loadspecies.php getting speicies:
$genus = $_get['genus']; $species = get_species($genus); echo("<option value='0'>select species (optional)</option>"); foreach($species $key => $value) { echo("<option value='$key'>$value</option>"); }
all of dynamic dropdowns work except species one. have looked @ hours , debugged can , cannot see why options not being populated in species dropdown. have isolated call loadspecies.php , returns correct list of species options itself. javascript runs no errors. no errors in console.
i hoping set of eyes might see missing here. thank in advance!
code get_species: function get_species($genus_id) { global $database; $sql = $database->query("select id, species_name species genus_id = ".$database->escape_value($genus_id)." order species_name"); $speciesarray = array(); while ($row = $sql->fetch_assoc()) { $speciesarray[$row['id']] = $row['species_name']; } return $speciesarray; }
user error! had require statement in php including other html had element id of species--an ambiguous id reference. changed id name , worked.
Comments
Post a Comment