How To Detect Option Change When Using selectBoxIt JQuery Plugin?

Question

Live Demo On JSBin

  $(".abc123").selectBoxIt();

  $(document).on('mousedown', function(e) {
    if ($(e.target).parent().parent().parent().parent().children(":first").hasClass('abc123')) {
      var anchor = $(this).find('a');
      var test = $(anchor).text();
      alert($(this).parent().attr('class'));
    }
  })

The above is a snippet of my much larger script where I am trying to apply additional functions mousedown section. I'm using the selectBoxIt JQuery plugin which will turn any basic select option list into a more prettier version.

What is my best solution to detect a new option change?

Answer 1

Even though you're using a plugin to style the select , you can still hook to the change event of the underlying element, like this:

$(".abc123").selectBoxIt().change(function() {
    console.log(this.value);
});

I'm not certain exactly what your current code is attempting to do as this is the document and therefore attempting to get the parent() is moot, however the above code will at least get you the current value of the select when it's changed.