jQuery ReferenceError：函数未定义

I have a simple jquery function that reflects the selected value of a dropdown to textbox but the problem is that the console says that my function was undefined. I put the function inside the onchange event of the dropdown. Please note that all of my jquery functions was on the bottom of the page..

and here is the dropdown:

<div class="form-group">
      <label class="control-label">Operation</label>
        <select class="form-control" id="operationName" name="operationName">
       <option value="">-SELECT-</option>
        <?php
         foreach($operation as $val)
         {
          ?>
          <option value="<?php echo $val['OperationName'];?>"><?php echo $val['OperationName'];?></option>
          <?php
         }
      ?>
      </select>
          <span class="text-danger"><?php echo form_error('operation');?></span>
          <input type="text" class="form-control" id="deldays" name="deldays" 
          value="" />

this is the operation array model

function getDeliveryDays($str) { $this->db->select('DeliveryDays'); $this->db->from('operation'); $this->db->where('OperationName',$str); return $this->db->get()->result(); }

this is the controller:

public function getDays()
{
    $id = $this->input->post('q');
    $data['days'] = $this->wip_model->getDeliveryDays($id);

    echo json_encode($data);
}

I took the working in my other project and use it in my current project but still the same result and when I inspect it in the dev tools, the said script is missing in view source but it's present in IDE:

this is the code:

function showDeliveryDay(operation)
    {
        $.ajax({
            type: "POST",
            url: "<?php echo site_url('wip/getDays/');?>",
            data: {q:operation},
            success: function(data){
                console.log(data);
            },
        });
    }

Thanks in advance....

Does you put the function inside domready? If so, remove that and placed it outside like so :

<script>
  function showDays() {
     var x = document.getElementById("operationName").value;
     document.getElementById("deldays").innerHTML = x;
  }

 // domready here
 $(function(){...}); // or $(document).ready(function(){...});     
</script>

You can refer this code

Html

<div class="form-group">
      <label class="control-label">Operation</label>
        <select class="form-control" id="operationName" name="operationName">
       <option value="">-SELECT-</option>


          <option value="one">1</option>
               <option value="two">2</option>
                    <option value="three">3</option>

      </select>
          <span class="text-danger"></span>
          <input type="text" class="form-control" id="deldays" name="deldays" 
          value="" />

Js code

jQuery( document ).ready(function() {    
     jQuery('#operationName').on('change', function(){    
     var p=jQuery(this).val();
     jQuery("#deldays").val(p);     
     });   

});

You can view demo here

Make sure you are including your jquery in your code. try this:

jQuery( document ).ready(function() {    
    jQuery( "#operationName" ).change(function() {
     var pVal = jQuery("#operationName").val();
     jQuery("#deldays").val(pVal);     
     });  

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label">Operation</label>
<select class="form-control" id="operationName" name="operationName">
<option value="">-SELECT-</option>


<option value="one">1</option>
<option value="two">2</option>
<option value="three">3</option>

</select>
<span class="text-danger"></span>
<input type="text" class="form-control" id="deldays" name="deldays" 
value="" />

</div>

</div>