Possible Duplicate:
How to dynamically populate options on dropdown lists based on selection in another dropdown?
I have MySQL tables looking like that
regions table
id | region
-------------------
1 | Region1
2 | Region2
...
and schools table
id | school
-------------------
1 | schno1
1 | schno5
1 | schno6
2 | scho120
There are multiple select (dropdown) menus in my registration form. The regions dropdown looks like that
<td>
<select name="region" id="region">
<option value="">Region</option>
<?php
$result=$db->query("SELECT * FROM regions");
while($row=$result->fetch_array(MYSQLI_BOTH))
{
echo '<option value="'.$row[0].'">'.$row[1].'</option>';
}
?>
</select>
</td>
<td>
<div id="sch_dropdown">
<select name="school" id="school">
<option value="">School</option>
</select>
</div>
<span id="loading"><img src="core/design/img/jquery-ui/loading.gif" width="16" height="16" align="absmiddle"> Loading...</span>
<div id="no_sch">No schools found</div>
</td>
I want to populate new dropdown list based on previous selections. What i want to do is, get "regions" id, then populate schools dropdown menu based on id (id of previous selection) from "schools" table on the fly. Here is my code but it doesn't work.
My js looks like that
$(document).ready(function(){
function populate() {
fetch.doPost('core/code/includes/search.php');
}
$('#region').change(populate);
var fetch = function() {
var schools = $('#schools');
return {
doPost: function(src) {
$('#loading').show();
$('#sch_dropdown').hide();
$('#no_sch').hide();
if (src) $.post(src, { region_code: $('#region').val() }, this.getschools);
else throw new Error('No SRC was passed to getCounties!');
},
getschools: function(results) {
if (!results) return;
schools.html(results);
$('#loading').hide(); // Hide the Loading...
$('#sch_dropdown').show(); // Show the drop down
}
}
}();
populate();
});
and search.php
if(isSet($_POST['region_code'])) {
$res=$db->query("SELECT * FROM schools WHERE id='".$_POST['region_code']."'");
while ($row = $res->fetch_array(MYSQLI_BOTH)) {
echo '<option value="'.$row[0].'">'.$row[1].'</option>';
}
}
Please help me to finish it. Thx in advance.
