Question

我有一个动态生成的注册表单，我试图操纵。我需要的是当我选择“退休”时＃39;在“职业”的下拉菜单中它下面的部分说“现在的职业/工作＆＃39;应该隐藏并在“活跃”时显示被选中。以下是该代码。

<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>

上面提到的任务的jQuery是：

$(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();
    }
});

现在，当页面加载时，会发生什么？已被选中，当我将其更改为“退休”时功能正常。但是我无法将其改回“活跃”状态。之后。选择下拉菜单即会以退休＆＃39;关闭剩下的选择。为什么会这样呢？

Answer 1

此处：$(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();
    }
});

DEMO

选择元素仅在执行函数后工作一次

1 个答案: