jQuery:单击对下拉菜单选项无效

时间:2019-07-23 10:44:36

标签: jquery drop-down-menu click

所以我想做的是,当从下拉菜单中选择某个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');
});

您知道我在做什么错吗,以及如何解决或解决此问题?

1 个答案:

答案 0 :(得分:1)

您不能将click event listener添加到option,而是必须检查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');
  }
});