Select on('change') fires twice and one of the times with an empty value

Code example:

$(() => {

    $('select').on('change', e => {

        const $this = $(e.currentTarget)

        console.log('value:', $this.val())

    })

})

When changing the select once, the following outputs in console:

value: test-value
value: 

The second time it fires, the value is simply not empty, which can break your script if you don’t add the following checker:

if ($this.val().length === 0) return 

[Whip]

I had this problem with my code

$('.myClassName').on('change', function(){
  console.log($(this).val());
});

which fired twice like the OP said. One with the value and other one empty. Reason that happens is because materialize creates a div that you actually interact with and hides the select element. The div has the same class so the onChange applies to the div as well. My solution was

$('select.myClassName').on('change', function(){

or you could use an ID, I haven’t tested that.

[ekampp]

Do you have jQuery required twice? This has happened to me before if jQuery is included twice in your code base.