JQuery doesn't fire change event on dropdown
I'm trying to trigger a dropdown change event in jQuery (wordpress) but it doesn't work.
jQuery("select.buDropDown").each(function() { this.selectedIndex = 0 }).trigger('change');
Running this in the console only changes the selectedIndex to 0, but never fires a change event that shows / hides certain elements on the page.
However, by running this in the console everything works fine:
$("select.buDropDown").each(function() { this.selectedIndex = 0 }).trigger('change');
I can't find any reason why "$" would work but not "jQuery"
I tried to wrap it up:
jQuery(function($) {}
to be able to use $ instead, but in wordpress code it still doesn't raise change events
Any ideas?
source to share
Your problem is that you are calling the trigger function after each loop is closed. It will never happen. The following would be accomplished:
jQuery("select.buDropDown").each(function() {
this.selectedIndex = 0;
jQuery(this).trigger('change');
});
And by the way, the following statement:
$("select.buDropDown").each(function() { this.selectedIndex = 0 }).trigger('change');
This means select the select.buDropDown collection and loop that collection and then invoke a change on that collection. This will only change the first object in that collection. Not for everything.
source to share
Thanks for all the contributions, you gave me a few ideas that I would like to follow through and the following worked for my situation:
$("select.buDropDown").each(function() {
this.selectedIndex = 0;
});
$('select.buDropDown').parent().children('div').each(function() { $(this).hide(); });
Even though the appropriate default change events took care of this, a reset would be fine.
source to share