Html html5中的if then语句
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17439921/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
if then statement in html5
提问by Artemis F
I am working in creating a website. I have a page where I have a drop down list and I want to make it so that when the user selects the option "Other" a text box comes up. How do I do that?
我正在创建一个网站。我有一个页面，我有一个下拉列表，我想让它在用户选择“其他”选项时出现一个文本框。我怎么做？
Here's my code:
这是我的代码：
<!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>
回答by John Woodruff
Attach an "onchange" event to your select element with a function which checks which option is the selected value and if it is the "Other" option, change a hidden text box from being hidden to being visible. Example below:
使用一个函数将“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>
I added the input element which is hidden and will be shown if you select the "other" option.
我添加了隐藏的输入元素，如果您选择“其他”选项，它将显示。
Then, in the checkOption()function do your checking to see if Other is selected and change visibility based on that. For example:
然后，在该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";
}
}
It's simple and concise.
它简单明了。
回答by Sudarshan
html
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">
Write a request here if you would like to hear it.
如果您想听一听，请在此处写一个请求。
Javascript
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);
}
}
回答by tverghis
This is fairly simple to achieve using Javascript. Do not use HTML for anything other than structuring your website content.
使用 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>
And in Javaascript,
在 Javascript 中，
function openbox(requests) {
if(requests.selectedIndex == 3) {
//Remove the 'hidden' property'
} else {
//Add the 'hidden' property
}
}
EDIT: When you said text box, I thought of an alert for some reason. W3C School Reference: http://www.w3schools.com/tags/att_global_hidden.asp
编辑：当您说文本框时，我出于某种原因想到了警报。W3C 学校参考：http: //www.w3schools.com/tags/att_global_hidden.asp
回答by IcyFlame
The following works too:
以下也有效：
<!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>
