js function not calling function for auto populate

I have an input field which contains the name of states and show the corresponding region on other field.The moments i change the value of state field the value of region should be changed.it is not working with my code what is wrong with tis
htlml code is

<div class="col-md-4 form-group"style="padding-right:0px;" >
<div class="form-group">
<label for="Region" >State</label>
<?php 
$sql="select rid,statename,region from tblregion order by statename";
$stmt=$dbh->prepare($sql);
$stmt->execute();
$arrstate=$stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<select class="form-control" name="state" id="state" >
<option value="<?php echo htmlentities($result->state);?>"><?php echo htmlentities($result->statename);?></option>
<?php
foreach($arrstate as $state){
?>
<option value="<?php echo $state['rid']?>"><?php echo $state['statename']?></option>
<?php
}
?>
</select>
</div></div>
<div class="col-md-2 form-group" style="padding-left:0px;">
<label for="Region" >Region</label>
<select class="form-control" name="" id="region" readonly>
<option><?php echo htmlentities($result->region);?></option>
</select>
</div>

The CODE FOR JAVA SCRIPT is

<script>

$(document).ready(function(){
jQuery('#state').change(function(){
//alert("hello);
var rid=jQuery(this).val();

jQuery.ajax({
type:'post',
url:'get_data.php',
data:'id='+rid,
success:function(result){
jQuery('#region').html(result); 
//alert(result);
}
}); 
});
});

</script>