Question

我有这个简单的形式：

<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做到这一点吗？

Answer 1

你不能在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)">

Answer 2

隐藏属性隐藏了选择，但标记仍然呈现，并占用了页面上的空间。

如果你想隐藏一个选择并且根本不希望它出现，但仍然能够与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>

Answer 3

我知道这是一个旧的，但我改变了下面列出的Goran代码，并认为我会分享。这会折叠代码，使其不会在页面上保留它的空间，而上面列出的代码会继续保持它的形式，但会变得不可见。

function genderSelectHandler(select){
if(select.value == 'girl'){
$("#earringstd").show() 
}else{
$("#earringstd").hide();
}}

<select name="sex" onchange="genderSelectHandler(this)">

如何隐藏选择标签？

3 个答案: