Uncaught TypeError: Cannot read property 'current' of null - Select2.js 选择任何选项

Question

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

Answer 1

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) }) }) 

`

Answer 2

You can Try This...

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

http://jsfiddle.net/ve3ntc6q/

Answer 3

 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 4

I have the same issue.

I fixed it by making sure all JSON objects that I pass into my select2 is not null or empty. Then everything works fine. This occurs on my Select 4.0.5 version.

Answer 5

Try this .. This solved my problem

 $("select").change(function () { ... }); with: $("select").on("select2:select select2:unselecting", function () { ... });