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

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

HTML:

---

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

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

请参阅更新的小提琴：

功能验证{ 如果document.getElementById为'defect'。值=='Yes'{ document.getElementById'extra'.style.display=； document.getElementById'auth_by'.disabled=false； document.getElementById'desc'.disabled=false； }否则{ document.getElementById'extra'。style.display='none'； } } 缺点 不 对 描述 授权人 提交

---

当我运行这个提琴时，我得到的校验没有定义。检查需要在html之前定义。请参阅fiddle:@MattLaza-如果选择“是”，则字段现在显示，但如果选择“否”，则不允许您提交表单。抱歉，我似乎无法在fiddle中复制该字段。是和否都提交表格。它在小提琴中转向。检查是否有其他javascripts错误被抛出？@MattLaza没问题，这是我这边的事情，现在可以工作了。如果您想创建一个答案，我将标记为正确。谢谢你的帮助！更正：无需在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>

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';
  }
}