jquery下拉列表显示功能不起作用

Question

我面临一个问题。我编写了以下代码：

$(document).ready(function() {
        $('.show-hide').hide();
        $('.dependent').on('change', function() {
          if ($(this).val() == 'Anders...')
          {
            $('.show-hide').show();
          } else {
            $('.show-hide').hide();
          }
        });
      });

但出于某种原因我不能让它正常工作。在这里：http://go.pardot.com/l/471061/2022-03-29/6fp8dp

我想向大家展示安德斯.字段基于值‘Anders.’在下坠处。但出于某种原因，它要么出现在所有的答案上，要么根本就没有出现，或者(我迄今为止最好的)它出现在“安德斯”上.有价值，但不再消失..。

注意，由于表单生成器的限制，我必须使用类选择器。

请帮帮我，我不知道我做错了什么。

谢谢!

Answer 1

您在链接中所指向的示例并不完全是MCVE。因此，我的答案只能是猜测。我挑选了一些似乎与上面发布的问题相关的信息：

​

$(document).ready(function() {
  $('.show-hide').hide();
  $('.dependent').on('change', function(ev) {
    if ($("option:selected", ev.target.selected).text() == 'Anders...') {
      $('.show-hide').show();
    } else {
      $('.show-hide').hide();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="form-field dependent Opleidingen_Amsterdam_Arenaboulevard_61_75 pd-select required required-custom    form-field-secondary dependentFieldSlave dependentField">

  <label class="field-label" for="471061_186248pi_471061_186248">Opleiding *</label>


  <select name="471061_186248pi_471061_186248" id="471061_186248pi_471061_186248" class="select" onchange="">
    <option value="" selected="selected"></option>
    <option value="2692949">Manager handel (Filiaalmanager)</option>
    <option value="2699837">Anders...</option>
  </select>
</p>
<p class="form-field show-hide Opleidingen_Anders pd-text required required-custom    ">

  <label class="field-label" for="471061_186680pi_471061_186680">Anders *
  <input type="text" name="471061_186680pi_471061_186680" id="471061_186680pi_471061_186680" value="" class="text" size="30" maxlength="65535" onchange="" onfocus="" /></label>

</p>

​

change事件处理程序通过类dependent附加到所有元素。我找到的元素是一个<p>元素，里面有一个<select>。因此，每当事件函数被触发时，this将指向<p> DOM元素。如果您想将选定的“值”(这里您真正想要的是所选选项的.textContent )与字符串"Anders..."进行比较，则需要执行以下操作：

$("option:selected", ev.target.selected).text() == 'Anders...'

ev.target是在<p class="... dependent ...">元素中更改的<select>元素。