How can i call a function inside onChange of selectize?

Question

How can i call a function inside onChange of selectize?

onChange: function(value){
  weatherWidget(value)
}

$(document).ready(function() {
  function weatherWidget(location){
    console.log('test');
  }
}

this code gives me not defined function. Thank you

Answer 1

You have a scope issue. You can either wrap your selectize call in $(document).ready as well (which it should probably be wrapped in regardless) or just leave your function declaration outside of it, as it will be loaded in parse time. I recommend leaving the function outside of $(document).ready, like so:

$(document).ready(function() {
  $(x).selectize({
    ....
    },
    onChange: function(value) {
      weatherWidget(value);
    }
  });    
});

function weatherWidget(location) {
  console.log(location);
}

Answer 2

This is how you can trigger value change in selectize dropdown list:

       $('#selector').selectize({
            onInitialize: function() {
                this.trigger('change', this.getValue(), true);
            },
            onChange: function(value, isOnInitialize) {
                if(value !== ''){
                   alert('Value has been changed: ' + value);
                }
                
            }
        });