jQuery not reacting to the change event
Hi,
I'm glad this forum exits,
I have written a jquery code to capture an change event defined on an select html element, which should trigger an ajax request to a PHP file, the data returned is used to update another select element. When I indeed trigger the change event on the first select element I don't see any change in the second select element. Firebug shows no errror in the console.
html code of the select elements:
<select name="sous-compte" id="sous-compte" class='selec' <!--onchange="selectdepartement(this.value)" onload="selectdepartement(this.value)"-->>
<div id="tprct"><select name="type_recette" id="type_recette" class='selec'>
<option value="">Concerne ---</option>
<?php
?>
</select> </div>
This is the jquery code:
<script src="jQuery/prod/jQuery.min.js" type=
"text/javascript">
<Script type="text/javascript">
$(document).ready(function(){
// Create sous-compte elt
// var souscompte = document.getElementById('sous-compte');
// capture the event on the 'sous-compte' html element
$("#sous-compte").change(function(){
// Get selected value
// var value = $("#sous-compte").val(); // alert(value);
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val(); // alert(valueSelected);
// Send an ajax request using jquery
$.ajax({
type:'GET',
url:'selectdepartement.php',
dataType:'json',
data:'souscompte='+valueSelected,
success:function(jsondata){
// Grab the tprct div elt and update the selected option
// var tprct = document.getElementById('tprct');
$("#tprct").innerHTML = '<select name="type_recette" id="type_recette" class="selec"><option value="'+jsondata.code+'">'+jsondata.name+'</option></select>';
}})
});
});
</script>
Please help, any help will be very appreciated