jQuery not triggering change event on dropdown

Question

I'm trying to trigger the dropdown change event in jQuery (wordpress) but it's not working.

jQuery("select.buDropDown").each(function() { this.selectedIndex = 0 }).trigger('change');

Running this in console only changes the selectedIndex to 0, but never triggers the change event that shows/hides certain elements on the page.

However, running this in console, everything triggers fine:

$("select.buDropDown").each(function() { this.selectedIndex = 0 }).trigger('change');

I can't find any reasons why "$" would work but not "jQuery"

I tried wrapping it in:

jQuery(function($) {}

to be able to use $ instead, but in the wordpress code it still doesn't trigger the change events

Any ideas?

This is very odd behaviour, given that $ is an alias for jQuery. Could you set up a working example of the problem in a jsfiddle.net. — Rory McCrossan
– Rory McCrossan, Commented Mar 31, 2017 at 7:58
1. Do yourself a favour now, stop using wordpress. 2. Encapsulate all of your jQuery and reassign jQuery to $ like this (function($){ ... /*code here*/ ... })(jQuery); — Panomosh
– Panomosh, Commented Mar 31, 2017 at 8:02
@Panomosh if giving up is your solution then I wonder what system you're on now, because having issues with a CMS and then suggesting to change it as a solution each time there is a slight issue is counterproductive. Thanks for your suggestion on wrapping it to get $ back, but even doing that it doesn't trigger properly — zerohero
– zerohero, Commented Mar 31, 2017 at 8:19

Muhammad Qasim · Accepted Answer · 2017-03-31 08:07:55Z

1

Your problem is that you are calling trigger function after closing the each loop. This would never happen. The following would work:

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 that select the collection of select.buDropDown and loop this collection and then trigger change on this collection. It will trigger change for only the first object in this collection. Not for the whole.

edited Mar 31, 2017 at 8:07

answered Mar 31, 2017 at 8:02

Muhammad Qasim

1,73217 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zerohero Over a year ago

Thanks, I did do that in one of my attempts at getting it to work, however, running it in console with jQuery doesn't trigger the change event even if the selectedIndex changes successfully (using your method)

zerohero · Accepted Answer · 2017-03-31 08:37:00Z

0

Thank you for all contributions, you gave me some ideas I wanted to follow, 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 dropdown's respective change events would have taken care of it, resetting to the original state is fine.

answered Mar 31, 2017 at 8:37

zerohero

5834 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery not triggering change event on dropdown

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related