Showing Hiding Blocks based on Select

[Leon Derks]

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>