php - 如何根据下拉菜单中选择的项目将文本框更改为可见？

Question

我有一个下拉菜单，其中包含学校科目列表，最后一个选项是“添加新科目”，因此当用户选择该选项时，我需要出现一个文本框。

我的 HTML 表单如下所示:(我只包含了相关部分，上面还有更多内容。

<form method="post" action="createQuestion.php" name="cq">
  <select name="subject" id="subject">
    <option value="biology">Biology</option>
    <option value="maths">Maths</option>
    <option value="economics">Economics</option>
    <option value="newSub" <?php if($subject == "newSub1") { echo "SELECTED"; } ?>>
      Add New Subject
    </option>
  </select> 
  <input type="text" name="newSubtxt" ID="newSubtxt" style="visibility:hidden"> 
</form>

我花了很长时间试图让它与 JavaScript 一起工作，但我根本无法让它工作。

这是我写的js，但是不起作用

function addSubject(){
  const newSub = document.getElementById('newSub').name;
  const selectedSubject = document.getElementById('subject').value;
  if (selectedSubject === newSub){
    document.getElementById(newSubtxt).style.display = 'block';
  }
}

如果有人可以帮助我解决 JavaScript 问题，以便它能够正常工作，我将不胜感激。预先感谢:)

Answer 1

将您的不可见输入更改为:

<input type="text" name="newSubtxt" id="newSubtxt" style="display: none" />

和你的js:

function addSubject() {
    var selectedSubject = document.getElementById('subject').value;
    if (selectedSubject == 'newSub') {
        document.getElementById('newSubtxt').style.display = 'block';
    }
}

另请参阅我的jsfiddle .