如何根据在下拉菜单中选择的项目将文本框更改为可见 - How to change a text box to visible depending on what item is selected in a drop down menu?

How to change a text box to visible depending on what item is selected in a drop down menu?

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

我的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，使它将工作。提前感谢:)

将不可见输入改为:

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

用

改变文本框的样式

<input type="text" name="newSubtxt" ID="newSubtxt" style='display:none;'>

我已经使用jQuery (javascript库)来解决你的问题。

$(document).ready(function () {
    $('#subject').change(function (){
    if($('#subject').val()=='newSub')
        $('#newSubtxt').show();
    else
        $('#newSubtxt').hide();
    });
});

查看我的jsfield