xRobot xRobot - 4 months ago 18
Javascript Question

How to hide a select tag?

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

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