javascript - 如何隐藏选择标签？

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>

我希望当我在第一个选择中单击“男孩”时，这个 block 必须消失:

<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)">