Showing Hiding Blocks based on Select

[Leon Derks <le...@aurumeurope.com>]

Hello

In my page I have a form with a select. (see below) Based on this select I want to show/hide different Blocks with <tr> elements.

What is the best way to do this? I tried to use a zone, but the zone div is automatically moved to the top of the page and I don't want that.
How can I show/hide <tr> elements based on the value I have selected?

regards,
Leon



<tr class="even">
	<th>Type</th>
	<td>
		<select t:type="select" t:id="typeSelect" value="type"/>
	</td>
</tr>

<t:block id="blockHighLow">
	<tr class="odd">
		<th>High</th>
		<td>
			<input type="text" size="50" />
		</td>
	</tr>
	<tr class="even">
		<th>Low</th>
		<td>
			<input type="text" size="50" />
		</td>
	</tr>
</t:block>

<t:block id="normalBlock">
	<tr class="odd">
		<th>Normal</th>
		<td>
			<input type="text" size="50" t:type="textfield" t:id="usageInput" value="energyBill.consumption.value" />
		</td>
	</tr>
</t:block>