CODEWITHSUNDEEP
jquerydrop-down-menuclick
Sanja Sentic
Sanja Sentic

Reputation: 11

jQuery: click doesn't work on dropdown menu option

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?

Upvotes: 1

Views: 383

Answers (1)

cloned
cloned

Reputation: 6742

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');
  }
});

Upvotes: 1

Related Questions