Dropkick JS change event value is undefined

Question

I've trawled the web looking for a solution to this one.

You can see the issue in action here: http://jsbin.com/nomij/5/edit

Basically each time the dropkick change event is fired I need to access the value of the selected option, the documentation uses this example:-

$('.change').dropkick({
  change: function (value, label) {
    alert('You picked: ' + label + ':' + value);
  }
});

Both value and label return undefined. Any ideas where I am going wrong?

Dropkick documentation: https://github.com/Robdel12/DropKick/blob/master/readme.md

Answer 1

If you check the documentation in the change function this is the value of the dropkick element. So this.value is your value. I did not find a way in the documentation to get the label of the selected element through a dropkick function, but you can use the value from your dropkick element to select the right list element and return it's contents:

$('.change').dropkick({
  change: function () {
    value = this.value;
    label = $("li[data-value='" + value + "']").html();

    alert('You picked: ' + label + ':' + value);
  }
});

It's maby not the best solution, but I could not find an other way from the documentation. Here is an example.