Javascript 如何隐藏选择标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4423132/
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
How to hide a select tag?
提问by xRobot
I have this simple form:
我有这个简单的形式：
<form method="post" action="index.php" >
<table>
<tr>
<td>
Sex:
</td>
<td>
<select name="sex" >
<option value="e">Select </option>
<option value="girl">Girl </option>
<option value="boy">Boy </option>
</select>
</td>
</tr>
<tr>
<td>
Accessories:
</td>
<td>
<select name="earrings" >
<option value="e">Select </option>
<option value="gold">gold </option>
<option value="silver">silver </option>
</select>
</td>
</tr>
</table>
<br>
<input type="submit" size="10" value="Go" name="go">
</form>
and I want that when I click on "boy" in the first select then this block have to dissapears:
我希望当我在第一个选择中点击“男孩”时，这个块必须消失：
<tr>
<td>
Accessories:
</td>
<td>
<select name="earrings" >
<option value="e">Select </option>
<option value="gold">gold </option>
<option value="silver">silver </option>
</select>
</td>
</tr>
I can do this with CSS ? If not, I can do this with javascript ?
我可以用 CSS 做到这一点吗？如果没有，我可以用 javascript 做到这一点吗？
回答by Goran Jovic
You can't do this in CSS, but you can in JavaScript
你不能在 CSS 中做到这一点，但你可以在 JavaScript 中
function hide(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'hidden';
}
function show(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'visible';
}
Just make sure that your tdhas id=earringstd
只要确保你td有id=earringstd
Then create function:
然后创建函数：
function genderSelectHandler(select){
if(select.value == 'girl'){
show();
}else if(select.value == 'boy'){
hide();
}}
Now all you have to is change your gender select tag to:
现在您所要做的就是将您的性别选择标签更改为：
<select name="sex" onchange="genderSelectHandler(this)">
回答by live-love
The hidden property hides the select but the tag is still rendered, and takes up space on the page.
hidden 属性隐藏了选择但标签仍然呈现，并占用页面上的空间。
If you want to hide a select and not want it to appear at all, but still be able to interact with the DOM, here's some sample code:
如果你想隐藏一个选择并且根本不希望它出现，但仍然能够与 DOM 交互，这里有一些示例代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function hide(){
var elem = document.getElementById('sel1');
elem.style.display = 'none';
}
function show(){
var elem = document.getElementById('sel1');
elem.style.display = 'inline';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<select id='sel1' style='display:inline;'/>
<input type="button" onclick="show();" value="Show"></input><br>
<input type="button" onclick="hide();" value="Hide"></input><br>
</form>
</body>
</html>
回答by Crystal
I know this is an old but I altered Goran code as listed below and thought I would share. This collapses the code so that it doesn't retain it's space on the page, whereas the code listed above holds continues to hold it's form but becomes invisible.
我知道这是一个旧的，但我修改了下面列出的 Goran 代码，并认为我会分享。这会折叠代码，使其不会在页面上保留它的空间，而上面列出的代码继续保持它的形式，但变得不可见。
function genderSelectHandler(select){
if(select.value == 'girl'){
$("#earringstd").show()
}else{
$("#earringstd").hide();
}}
<select name="sex" onchange="genderSelectHandler(this)">
