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

Question

I cannot seem to locate the flaw in my code. 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="{{$shipment->bill_to}}" selected>3</option>
                    @endif

                    @foreach($cCustomers as $customer)
                        <option value="{{$customer->id}}">{{$customer->customer_name}}</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>

Can anyone spot anything?

Update

Based on the suggestion below that worked the best in my case, my script now looks like this:

    $(document).ready(function() {
        if ($('.js-example-basic-single').val() == "") {
                $('#biller').addClass('hidden');
                $('#existing_biller_details').removeClass('hidden');
        }

        var $eventSelect = $("#bill_to");
            $eventSelect.select2();
            $eventSelect.on("select2:select", function (e) {
          if ($eventSelect.select2().val() == '')
          {
                $('#biller').removeClass('hidden');
              $('#existing_biller_details').addClass('hidden');
                          alert('cleared');
          }
          else
          {
                $('#biller').addClass('hidden');
              $('#existing_biller_details').removeClass('hidden');
              alert('not cleared');
          }
    });

});

The alerts above are only there to guide me in what isn't working. At the moment, I load up the page I have set the div with the id of "existing_biller_details" to already be hidden, but if a value is selected in the select2, the "hidden" class is removed.

My problem at the moment is that using the above code, only the "else" works completely. If I go through the initial "if" statement, it will only conduct $('#biller').removeClass('hidden') and then it can't go any further. I don't see any errors in the console but no alert comes up and the command $('#existing_biller_details').addClass('hidden') doesn't work either.

Answer 1

You should trigger the change event directly on #bill_to

$('#bill_to').val('');
$('#bill_to').trigger('change');

But you should check Select2 docs as your main select gets hidden when Select2 is initialized and Select2 has its own set of events for change and such.

Answer 2

May be this help you

var $eventSelect = $("#bill_to");
    $eventSelect.select2();
    $eventSelect.on("select2:select", function (e) {
          if ($eventSelect.select2().val() == '')
          {
            $("#biller").show();
          }
          else
          {
            $("#biller").hide();
          }
    });