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,optionDispla开发者_如何学运维y: '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>
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.
Try:
<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){
for (var i = 0; i < j.length; i++) {
$('<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>').appendTo($("select#ctlPerson"));
}
})
})
})
</script>
EDIT: An alternative approach
<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 = $("select#ctlPerson").attr('options');
for (var i = 0; i < j.length; i++) {
options[options.length] = new Option(j[i].optionDisplay, j[i].optionValue);
}
})
})
})
</script>
credit: http://www.electrictoolbox.com/jquery-add-option-select-jquery/
Aramaz @Edit works because it does not use JSON. The problem is due to the fact tat the way in which JSON is parsed by jquery was changed at 1.4 to use the browsers native JSON parser. Therefore, all JSON properties and values shouled be put in double quotes (i.e. valid JSON format) for the response to be parsed correctly.
so this name-value array will be parsed correctly:
[ {"optionValue": "0", "optionDisplay": "Mark"}, {"optionValue":"1", "optionDisplay": "Andy"}, {"optionValue":"2", "optionDisplay": "Richard"}]
but this will not be parsed correctly by the newer JQuery versions:
[ {optionValue: 0, optionDisplay: 'Mark'}, {optionValue:1, optionDisplay: 'Andy'}, {optionValue:2, optionDisplay: 'Richard'}]
<html><body>
<head>
<script type="text/javascript" src="/js/jquery-1.10.2.js"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$("select#ctlJob").change(function(){
$.getJSON("/api_test.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>
<!-- [{optionValue:20, optionDisplay: 'Aidan'}, {optionValue:21, optionDisplay:'Russell'}] -->
<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'}
]
];
$("select#ctlJob").change(function() {
var $persons = $("#ctlPerson").empty();
$.each(data[$(this).val() - 1], function() {
$persons.append("<option value=" + this.optionValue + ">" + this.optionDisplay + "</option>");
});
});
})
</script>
</head>
<form action="api_test.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>
加载中,请稍侯......
精彩评论