0

我正在创建一个网站。我有一个页面，其中有一个下拉列表，我想这样做，以便当用户选择“其他”选项时会出现一个文本框。我怎么做？

这是我的代码：

 <!DOCTYPE html>
 <html>
 <html lang = "en">
 <body>

 <p id="demo"></p>

 <h1>What would you like it to say?</h1>

 <p>Commmon Requests:</p>

 <form action="input" action="random.html" method="get">
 <select name="requests">
 <option value="blank"> </option>
 <option value="good morning sir">Good Morning Sir</option>
 <option value="good morning madam">Good Morning Madam</option>
 <option value="other">Other</option>   
 <input type="submit" value="Submit">
 </select>
 </form>

 <br><br><textarea rows="3" cols="30">
 Write a request here if you would like to hear it.
 </textarea>

 </body>
 </html>
4

4 回答 4

3

使用一个函数将“onchange”事件附加到您的选择元素，该函数检查哪个选项是所选值，如果它是“其他”选项，则将隐藏的文本框从隐藏更改为可见。下面的例子：

<form action="input" action="random.html" method="get">
    <select id="requestDropDown" name="requests" onchange="checkOption()">
        ....
    </select>
    <input type="text" id="otherBox" style="visibility:hidden;"/>
</form>

我添加了隐藏的输入元素，如果您选择“其他”选项将显示。

然后，在checkOption()函数中检查是否选择了“其他”并据此更改可见性。例如：

function checkOption(){
    //This will fire on changing of the value of "requests"
    var dropDown = document.getElementById("requestDropDown");
    var textBox = document.getElementById("otherBox");

    if(dropDown.value == "other"){
        textBox.style.visibility = "visible";
    }

}

它简单明了。

于 2013-07-03T04:59:35.983 回答
2

工作演示

html

<body>
<p id="demo">
</p>
<h1>
    What would you like it to say?</h1>
<p>
    Commmon Requests:</p>
<form action="input" id="form1" action="random.html" method="get">
<select name="requests" onchange="check(this)">
    <option value="blank"></option>
    <option value="good morning sir">Good Morning Sir</option>
    <option value="good morning madam">Good Morning Madam</option>
    <option value="other">Other</option>
    <input type="submit" value="Submit">
</select>
</form>
<br>
<br>
<textarea rows="3" cols="30">

如果您想听，请在此处写下请求。

Javascript

function check(that) {
        if (that.value === "other") {
            var textBox = document.createElement('input');
            textBox.setAttribute("type", "text");
            textBox.setAttribute("id", "newTextBox");
            document.getElementById('form1').appendChild(textBox);
        }

        else {
            var box = document.getElementById('newTextBox');
            if (box)
                box.parentNode.removeChild(box);
        }
    }
于 2013-07-03T05:20:57.877 回答
1

使用 Javascript 实现这一点相当简单。请勿将 HTML 用于构建网站内容以外的任何内容。

<form method="post" action="">
<select name="requests" onchange="openbox(this);">
    ...
    <option value="other">Other</option>
</select>
</form>
...
<textarea rows="3" cols="30" hidden>
Write a request here if you would like to hear it.
</textarea>

在 Javascript 中，

function openbox(requests) {
    if(requests.selectedIndex == 3) {
       //Remove the 'hidden' property'
    } else {
       //Add the 'hidden' property
    }
}

编辑：当你说文本框时，我出于某种原因想到了一个警报。W3C 学校参考：http ://www.w3schools.com/tags/att_global_hidden.asp

于 2013-07-03T05:10:19.907 回答
0

以下也有效：

<!DOCTYPE html>
 <html lang = "en">
 <body>

        <p id="demo"></p>

        <h1>What would you like it to say?</h1>

        <p>Common Requests:</p>

        <form action="input" action="random.html" method="get">

        <select name="requests" onchange="checkIfOther();" id="dropDown1">

        <option value="blank"> </option>
        <option value="good morning sir">Good Morning Sir</option>
        <option value="good morning madam">Good Morning Madam</option>
        <option value="other">Other</option>

        </select>

        <input type="submit" value="Submit"/>
        </form>

        <div id="other" style="display:none">

            <label>Other(Please explain):</label><input type="text" id="otherText"/>


        </div>

        <br><br><textarea rows="3" cols="30">
        Write a request here if you would like to hear it.
        </textarea>

 </body>
 </html>

<script>

    function checkIfOther(){

        a = document.getElementById("dropDown1");        

        if(a.value == "other")           

            document.getElementById("other").setAttribute("style","display:inline");

        else

            document.getElementById("other").setAttribute("style","display:none");


        }

</script>
于 2013-07-03T05:19:13.723 回答