如果选择了下拉菜单，则显示额外的表单字段

Question

如果用户从下拉列表中选择'Yes'，我正在尝试显示两个额外的表单字段。如果用户没有从下拉列表中选择'Yes'，那么这两个额外字段不是必需的并且被禁用，但是如果选择'Yes'，则这些字段必须在提交表单之前填写。到目前为止我有这个，但是它不起作用。如果有人能指出这个问题，将不胜感激。

HTML：

<form id="form" method="post" action="action.php">

  <div class="form-group">
    <label class="control-label">Defect?</label>
    <select onclick='checkIfYes()' class="select form-control" id="defect" name="defect">
      <option id="No" value="No">No</option>
      <option id="Yes" value="Yes">Yes</option>
    </select>
  </div>

  <div id="extra" name="extra" style="display: none">

    <label class="control-label" for="desc">Description</label>
    <input class="form-control" type="text" id="desc" name="desc" required disabled>

    <label class="control-label" for="auth_by">Authorised By</label>
    <input class="form-control" type="text" id="auth_by" name="auth_by" required disabled>

  </div>

  <div class="form-group">
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit
    </button>
  </div>

</form>

JavaScript：

function checkIfYes() {
  if (document.getElementById('defect').value == 'Yes') {
    document.getElementById('extra').style.display = '';
    document.getElementById('auth_by').disabled = false;
    document.getElementById('desc').disabled = false;
  } else {
    document.getElementById('extra').style.display = 'none';
  }
}

JSFiddle

Answer 1

checkIfYes 需要在引用它的 HTML 之前定义。

我还建议将 select onclick 事件更改为 onchange，以便仅在用户实际更改其值时才调用它

查看更新的小提琴：Updated Fiddle

<script>      
  function checkIfYes() {
      if (document.getElementById('defect').value == 'Yes') {
        document.getElementById('extra').style.display = '';
        document.getElementById('auth_by').disabled = false;
        document.getElementById('desc').disabled = false;
      } else {
        document.getElementById('extra').style.display = 'none';
  }
}
</script>
<form id="form" method="post" action="action.php">

  <div class="form-group">
    <label class="control-label">Defect?</label>
    <select onchange='checkIfYes()' class="select form-control" id="defect" name="defect">
      <option id="No" value="No">No</option>
      <option id="Yes" value="Yes">Yes</option>
    </select>
  </div>

  <div id="extra" name="extra" style="display: none">

    <label class="control-label" for="desc">Description</label>
    <input class="form-control" type="text" id="desc" name="desc" required disabled>

    <label class="control-label" for="auth_by">Authorised By</label>
    <input class="form-control" type="text" id="auth_by" name="auth_by" required disabled>

  </div>

  <div class="form-group">
    <button class="btn btn-info" id="submit" name="submit" type="submit">Submit
    </button>
  </div>

</form>