How to hide a select tag?

Question

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 ?

Answer 1

You can't do this in CSS, but you can in 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 td has 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)">