aramaz aramaz - 1 month ago 6
PHP Question

Auto-populating select boxes using jQuery and Ajax - not working in anything newer than 1.3.2

I have been going through this tutorial on auto-populating boxes using jQuery and Ajax:
http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/

and in the demo the author is running jQuery version 1.2.3. Locally I managed to get the function running on jQuery 1.3.2. but running it on any version above that one is not working (the second box is not populating).

Here is the jQuery code:

<script type="text/javascript" src="jquery.js"></script>
<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>


This is the HTML code:

<form action="/select_demo.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" />
</form>


This is the server-side PHP:

<?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 do I rewrite this function so it works with, for example, jQuery 1.5?

Thanks for the help!

EDIT: Mark's solution worked, this is the HTML file with everything in it, and it should be relatively easy to adapt it to read a saved json file.

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Select test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
var data = [
[
{optionValue: 0,optionDisplay: 'Mark'},
{optionValue: 1,optionDisplay: 'Andy'},
{optionValue: 2,optionDisplay: 'Richard'}
],
[
{optionValue: 10,optionDisplay: 'Remy'},
{optionValue: 11,optionDisplay: 'Arif'},
{optionValue: 12, optionDisplay: 'JC'}
],
[
{optionValue: 20,optionDisplay: 'Aidan'},
{optionValue: 21,optionDisplay: 'Russell'}
]
];


$("#ctlJob").change(function() {
var $persons = $("#ctlPerson").empty();
$.each(data[$(this).val() - 1], function() {
$persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
});
});
})
</script>
</head>

<body>
<form action="/select_demo.php">
<label for="ctlJob">Job Function:</label>
<select name="id" id="ctlJob">
<option value="1">Managers</option>
<option value="2">Team Leaders</option>
<option value="3">Developers</option>
</select>
<noscript>
<input type="submit" name="action" value="Load Individuals" />
</noscript>
<label for="ctlPerson">Individual:</label>
<select name="person_id" id="ctlPerson">
<option value="1">Mark P</option>
<option value="2">Andy Y</option>
<option value="3">Richard B</option>
</select>
<input type="submit" name="action" value="Book" />
</form>
</body>
</html>

Answer

Assuming your json is valid you should be able to use the following:

 $("select#ctlJob").change(function(){
    $.getJSON("/select.php",{id: $(this).val(), ajax: 'true'}, function(data){
      var $persons = $("#ctlPerson").empty();
      $.each(data, function() {
        $persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
      });
    })
  });

Updated to use your markup in the question on jsfiddle.