jQuery: click doesn't work on dropdown menu option

Question

So what I'm trying to do is to show currently hidden custom field when a certain option from the dropdown menu is selected but can't seem to achieve this. Or in other words, after clicking on the specific option I would like to change the CSS on the currently hidden field from display:none to display:block.

I've managed to achieve that the custom field displays after clicking anywhere on the select menu with the code below, but this isn't enough. The hidden field should display only if you choose a specific option.

So this works...

jQuery('#select-menu').click(function() {
  jQuery('.custom-field-wrapper').css('display', 'block');
});

But this doesn't...

jQuery('#select-menu option:last').click(function() {
  jQuery('.custom-field-wrapper').css('display', 'block');
});

Any idea what I'm doing wrong and how to fix or workaround this?

Possible duplicate of jQuery event when select option

Jehanzeb.Malik
– Jehanzeb.Malik

2019-07-23 11:37:34 +00:00
Commented Jul 23, 2019 at 11:37 — Jehanzeb.Malik
– Jehanzeb.Malik, Commented Jul 23, 2019 at 11:37

cloned · Accepted Answer · 2019-07-23 10:55:14Z

1

You can't add click event listener to option, instead you have to check value of select and react accordingly: Something like this should work:

jQuery('#select-menu').on('click change', function() {
  if ($(this).val() === 'targetValue') {
    jQuery('.custom-field-wrapper').css('display', 'block');
  } else {
    jQuery('.custom-field-wrapper').css('display', 'none');
  }
});

answered Jul 23, 2019 at 10:55

cloned

6,9154 gold badges33 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

jQuery: click doesn't work on dropdown menu option

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related