Javascript Select元素仅在函数执行后工作一次

我有一个动态生成的注册表，我正在尝试操作它。我需要的是，当我在“职业”下拉列表中选择“退休”时，其下方的“当前职业/工作”部分应隐藏，并在选择“活动”时显示。下面是代码

<div class="upme-field upme-edit upme-edit-show">
    <label class="upme-field-type" for="profession">
        <i class="upme-icon-briefcase"></i><span>Profession</span>
    </label>
    <div class="upme-field-value">
        <select class="upme-input" name="profession" id="profession" title="Profession">
            <option value="Active">Active</option>
            <option value="Retired">Retired</option></select><div class="upme-clear">
        </div>
    </div>
</div>
<div class="upme-field upme-edit upme-edit-show">
   <label class="upme-field-type" for="present-job">
      <i class="upme-icon-briefcase"></i>
  </label>
  <div class="upme-field-value">
      <input type="text" class="upme-input" name="present-job" id="present-job" value="" title="Present Occupation / Job">
  </div>
</div>
<div class="upme-field upme-edit upme-edit-show">
   <label class="upme-field-type" for="previous-job">
      <i class="upme-icon-briefcase"></i>
  </label>
  <div class="upme-field-value">
      <input type="text" class="upme-input" name="previous-job" id="previous-job" value="" title="Previous Occupation / Job">
  </div>
</div>

现在，在页面加载时，选择了“Active”，当我将其更改为“Retired”时，该函数工作正常。但在那之后，我无法将其更改回“活动”。“选择”下拉列表仅在“已退休”仍处于选中状态时关闭。为什么会发生这种情况？

此处：

$（this）.val（'Retired'）

您正在设置值。您应该检查

$（this）.val（）=='Retired'

$(document.body).on('change', 'select[name=profession]', function () {
    var presentJobLabel = $('label[for=present-job]');
    if ($(this).val() == 'Retired') {
        $(presentJobLabel).parent().hide();
    } else {
        $(presentJobLabel).parent().show();
    }
});

---

愚蠢的错误。谢谢你的快速回复。

$(document.body).on('change', 'select[name=profession]', function () {
    var presentJobLabel = $('label[for=present-job]');
    if ($(this).val() == 'Retired') {
        $(presentJobLabel).parent().hide();
    } else {
        $(presentJobLabel).parent().show();
    }
});