Jquery TypeError: $(...).val(...) is null

I cannot seem to locate the flaw where my code is falling flat. I am using select2 for my select list and I have a button to the right that when clicked, performs the following script:

<script type="text/javascript">
function clearBiller() {
    $('#bill_to').val('').trigger('change');
}
</script>

But when clicked, I receive the TypeError: $(...).val(...) is null error which references this script:

<script>
$(document).ready(function(){
    $('#bill_to').on('change', function() {
      if ($(this).val() == '')
      {
        $("#biller").show();
      }
      else
      {
        $("#biller").hide();
      }
    });
    });
</script>

This issue is somewhere in this second function, I'm just not sure how to pin it down. At the moment this is the html in that part of the form:

<select id="bill_to" name="bill_to" class="js-example-basic-single form-control">
                    @if($shipment->bill_to)
                        <option value="" selected>3</option>
                    @endif

                    @foreach($cCustomers as $customer)
                        <option value=""></option>
                    @endforeach
                </select>
                <img src="/images/clear.png" height="15px" width="15px" style="margin-left: 5px;" onclick="clearBiller()">
                <div id="existing_biller_details" class="hidden" name="existing_biller_details" style="margin-top:10px;">
                </div>

If you can spot something, I'd be appreciative - Matt

via Chebli Mohamed