jQuery：单击在下拉菜单选项上不起作用答案

【问题标题】：jQuery: click doesn't work on dropdown menu optionjQuery：单击在下拉菜单选项上不起作用
【发布时间】：2019-07-23 18:55:14
【问题描述】：

所以我要做的是在从下拉菜单中选择某个option 但似乎无法实现这一点时显示当前隐藏的自定义字段。或者换句话说，点击特定的option后，我想将当前隐藏字段上的CSS从display:none更改为display:block。

使用下面的代码，我已经设法在单击选择菜单上的任意位置后显示自定义字段，但这还不够。仅当您选择特定选项时，才应显示隐藏字段。

所以这行得通...

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

但这并不...

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

知道我做错了什么以及如何解决或解决这个问题吗？

【问题讨论】：

jQuery event when select option的可能重复

标签： jquery drop-down-menu click

【解决方案1】：

您不能将点击事件侦听器添加到选项，而是必须检查 select 的值并做出相应的反应：这样的事情应该可以工作：

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

【讨论】：