Auto-populate three select lists - chained selects
Hey everyone, I'm new to JQuery so I thought maybe someone on this forum might be able to help me out with this one.
I'm implementing the select auto-populate functionality as posted by Remy Sharp @
http://remysharp.com/2007/01/20/auto-po ... uery-ajax/
I don't have a db back-end but have PHP installed. As you can see from the tutorial it shows how to auto-populate two select lists. I need to auto-populate a third one based on whatever the selected item on the second select list. So the values are connected and I want to pull the values from a server-side script, same as the example below (no db).
Here is the code to auto-populate two select lists:
-
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(j){
var options = '';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
}
$("select#ctlPerson").html(options);
})
})
})
</script>
And this is the server side code:
-
<?php
if ($_GET['id'] == 1) {
echo <<<HERE_DOC
[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]
HERE_DOC;
} else if ($_GET['id'] == 2) {
echo <<<HERE_DOC
[{optionValue:10, optionDisplay: 'Remy'}, {optionValue:11, optionDisplay: 'Arif'}, {optionValue:12, optionDisplay: 'JC'}]
HERE_DOC;
} else if ($_GET['id'] == 3) {
echo <<<HERE_DOC
[{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}]
HERE_DOC;
}?>
How can I tweak the above code to include a third select list which also pulls the values from the server side script and is linked to the second select list? I have tried but unsuccessfully ...