Uncaught TypeError: Cannot read property 'current' of null - Select2.js on selection any option

Select2 on dropdown always gives Uncaught TypeError: Cannot read property 'current' of null, when i select any data in select box it gives me error and it not call change event function

html codes

 <select name="sono[]" id="sonoDetails" class="select2 form-control select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    <option value="">Select SO No</option>
    <option value="5" data-bookingtime="2015-10-16 21:00:00">5</option>
    <option value="4" data-bookingtime="2015-10-17 20:15:00">4</option>                         
</select>

Js codes to get data on initialize select2 and on change event handler

 $(document).ready(function(){
    $(".select2").select2();
    $(document).on("change","select[name='sono[]']",function(){//
        var me = $(this);
        var sono = me.select2("val");
          console.log(sono);
    }); 
 });

It run fine only first time after that its always return Uncaught TypeError: Cannot read property 'current' of null in js...

I want change event work for every selection but now it runs only once

help to solve this problem

You should chain the select2() and val() functions in jquery instead of trying to use the select2() function with val as its parameter.

$(document).ready(function(){
  $(document).on('change', "select[name='sono[]']", function() {
    var sono = $('.select2').select2().val()
    console.log(sono)
  })
})

`

You can Try This...

$(document).ready(function(){
    $(".select2").select2().on("change", function (e) {
        console.log("change",$(this).val());
    });
});

http://jsfiddle.net/ve3ntc6q/