Java script not call a function on changing the value of a input field

I have bootstrap modal form with multiple input. One input field which contains the name of states and show the corresponding region on another 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>