I need advice on where to find a conflict with AJAX & Javascript. When i isolate the 4 drop down boxes, the code runs as expected. However when on my site it only pulls the list from the first dropdown from the database and doesn't trigger the onchange command for the 2nd dropdown.
I've tried googling various different questions and i cant find the answer. I've also reviewed chrome dev tools and i can see it calls the first ajax request but doesn't trigger the 2nd.
<script>
$(document).ready(function(){
$('#manufacturer').on('change', function(){
var manuID = $(this).val();
if(manuID){
$.ajax({
type:'POST',
url:'ajax.php',
data:'manu_id='+manuID,
success:function(html){
$('#manumodel').html(html);
$('#manuyear').html('<option value="">Select state first</option>');
}
});
}else{
$('#manumodel').html('<option value="">Select country first</option>');
$('#manuyear').html('<option value="">Select state first</option>');
}
});
$('#manumodel').on('change', function(){
var manumodelID = $(this).val();
if(manumodelID){
$.ajax({
type:'POST',
url:'ajax.php',
data:'manumodel_id='+manumodelID,
success:function(html){
$('#manuyear').html(html);
}
});
}else{
$('#manuyear').html('<option value="">Select state first</option>');
}
});
});