Auto-populating Select Boxes Using Jquery And Ajax - Not Working In Anything Newer Than 1.3.2
Solution 1:
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.
Solution 2:
Try:
<scripttype="text/javascript"src="jquery.js"></script><scripttype="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
<scripttype="text/javascript"src="jquery.js"></script><scripttype="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] = newOption(j[i].optionDisplay, j[i].optionValue);
}
})
})
})
</script>credit: http://www.electrictoolbox.com/jquery-add-option-select-jquery/
Solution 3:
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'}]
Solution 4:
<html><body><head><scripttype="text/javascript"src="/js/jquery-1.10.2.js"></script><scripttype="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'}] --><scripttype="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><formaction="api_test.php"><labelfor="ctlJob">Job Function:</label><selectname="id"id="ctlJob"><optionvalue="1">Managers</option><optionvalue="2">Team Leaders</option><optionvalue="3">Developers</option></select><noscript><inputtype="submit"name="action"value="Load Individuals" /></noscript><labelfor="ctlPerson">Individual:</label><selectname="person_id"id="ctlPerson"><optionvalue="1">Mark P</option><optionvalue="2">Andy Y</option><optionvalue="3">Richard B</option></select><inputtype="submit"name="action"value="Book" /></form></body></html>
Post a Comment for "Auto-populating Select Boxes Using Jquery And Ajax - Not Working In Anything Newer Than 1.3.2"