jQuery: 点击下拉菜单选项不起作用

Question

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

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

所以这有效...

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

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

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

jQuery: 点击下拉菜单选项不起作用

jQuery: click doesn't work on dropdown menu option

jquery

click

drop-down-menu