xRo*_*bot 10 html javascript css
我有这个简单的形式:
<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>
我希望当我在第一个选择中单击"boy"时,此块必须消失:
<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>
我可以用CSS做到这一点吗？如果没有,我可以用javascript做到这一点？
Gor*_*vic 18
你不能在CSS中这样做,但你可以在JavaScript中
function hide(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'hidden';
}
function show(){
var earrings = document.getElementById('earringstd');
earrings.style.visibility = 'visible';
}
只要确保你td有id=earringstd
然后创建功能:
function genderSelectHandler(select){
if(select.value == 'girl'){
show();
}else if(select.value == 'boy'){
hide();
}}
现在,您只需将性别选择标记更改为:
<select name="sex" onchange="genderSelectHandler(this)">
hidden 属性隐藏了选择但标签仍然呈现，并占用页面上的空间。
如果你想隐藏一个选择并且根本不希望它出现，但仍然能够与 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>