Skjul/vis tabelelementer efter valg i select tag
Hej med jer.Jeg håber en eller anden kan provide en løsning på følgende:
Pr. default er værdien "Option 1" valgt i feltet "Field name #3". Hermed er også "Field name #4" + de to radiobuttons + de to multiple selects nedenunder vist.
Jeg vil gerne have det således, at når man i "Field name #3" vælger "Option 2", så skjules "Field name #4" + de to radiobuttons + de to multiple selects.
Når man så vælger "Option 1" i "Field name #3" skal "Field name #4" + de to radiobuttons + de to multiple selects skjules.
Kan nogen hjælpe?
Koden er her:
<html>
<head>
<title>Hide/Show Test</title>
<style>
td.input, select.input, input { font-family: arial; font-size: 12px; }
td.xs { font-family: verdana; font-size: 9px; }
</style>
</head>
<body bgcolor="#ffffff">
<table width="500" cellpadding="5" cellspacing="0" border="1">
<form name="" method="post" action="">
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="3" border="0">
<tr>
<td width="135" class="input"><div align="left">Field name #1</div></td>
<td width="110"><input class="input" class="input" maxlength="16" style="width: 160px;"></td>
<td colspan="2"></td>
</tr>
<tr>
<td width="135" class="input"><div align="left">Field name #2</div></td>
<td width="110"><input class="input" class="input" maxlength="16" style="width: 160px;"></td>
<td colspan="2"></td>
</tr>
<tr>
<td width="135" class="input"><div align="left">Field name #3</div></td>
<td class="s">
<select name="" id="" class="input" style="width: 80px;">
<option value="1">Option 1</option>
<option value="1">Option 2</option>
</select>
</td>
<td colspan="2"></td>
</tr>
<tr>
<td width="135" class="input"><div align="left">Field name #4</div></td>
<td align="left" class="xs" valign="center" colspan="3">
<input class="input" value="" name="" type="radio">Used by all
<input class="input" value="" name="" type="radio" checked>Used only by the following
</td>
</tr>
<tr>
<td width="135" class="input"></td>
<td align="left" class="s" width="150" valign="middle">
<select size="8" style="width:155px;" class="input" multiple>
<option>USED_BY_NAME_01</option>
<option>USED_BY_NAME_02</option>
<option>USED_BY_NAME_03</option>
<option>USED_BY_NAME_04</option>
<option>USED_BY_NAME_05</option>
<option>USED_BY_NAME_06</option>
<option>USED_BY_NAME_07</option>
<option>USED_BY_NAME_08</option>
<option>USED_BY_NAME_09</option>
</select>
</td>
<td align="left" class="input" width="30" valign="top">
<input type="button" style="width:25px;" name="Add" value="»"><br>
<input type="button" style="width:25px;" name="Remove" value="«">
</td>
<td align="left" class="m" valign="middle" width="150">
<select size="8" style="width:155px;" class="input" multiple>
</select>
</td>
</tr>
<tr>
<td width="135" class="input"><div align="left">Field name #5</div></td>
<td colspan="3" align="left">
<select name="" id="" class="input" style="width: 80px;">
<option value="1">Open</option>
<option value="1">Closed</option>
</select>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
