Uncaught TypeError: Unable to read the 'current' of null - Select2.js property when any option is selected

Question

Select2 on dropdown always gives Uncaught TypeError: Cannot read property 'current' of null, when I select any data in the selection window, it gives me an error and does not call the 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 for receiving data in initialize select2and on changeevent 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 works fine only the first time, after which it always returns Uncaught TypeError: Cannot read property 'current' of nullto js ...

I want the change event to work for each selection, but now it only runs once

Help solve this problem.

Answer 1

 var bindsonoSelect = function(){
        $("select#sonoDetails").on("change",function(){
            var me = $(this);
             var sono = me.select2("val");
            //var sono = me.select2().val();
            console.log(sono);
        }
    });
 }
bindsonoSelect ();

Answer 2

jquery select2() val() , select2() val .

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

`

Answer 3

You can try this ...

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

http://jsfiddle.net/ve3ntc6q/