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(){
            newSub = document.getElementById('newSub').name
            selectedSubject = document.getElementById('subject').value
                if (selectedSubject == newSub){
                document.getElementById(newSubtxt).style.display = 'block';
            }}

如果有人可以帮我解决这个问题，我会非常感激，这样才行。在此先感谢：）

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。

Answer 2

使用

更改文本框的样式

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

查看我的jsfiddle

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

2 个答案: