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

Question

所以，我要做的是显示当前隐藏的自定义字段，当下拉菜单中的某个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');
});

你知道我做错了什么吗?怎么解决这个问题？

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