how do I hide certain part of form - forms

Question

I have a form and it contains dropdown box and different div items. Based on selection from dropdown box, I show those div items. But some of the text in those div items are shown when the form is loaded and not when I select the option from dropdown box. The code is somewhat like this
<form>
<select id="">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<div id="onee"> header text ..<table> </table></div>
<div id="twoo"> header text ..<table> </table></div>
</form>
So when I load the page form with select drop down box is shown , but it also shows header text which is within div. How do I hide that text?

Answer 1

<div id="onee" style="display:none"> header text ..<table> </table></div>
<div id="twoo" style="display:none"> header text ..<table> </table></div>
so your full code on page load is
<form>
<select id="">
<option value="one"> One </option>
<option value="two"> Two </option>
<option value="three"> Three </option>
</select>
<div id="onee" style="display:none"> header text ..<table> </table></div>
<div id="twoo" style="display:none"> header text ..<table> </table></div>
</form>
after this when you change option in select box
just replace display:none with display:block

Answer 2

If you are using JavaScript to show divs based on selection, you can as well hide all the divs initially. Here is how to do it in JQuery:
$("#onee").hide();
$("#twoo").hide();
Or you can just hide them with CSS: diplay:none.
If you use postbacks in your drop-down, you can control html output on the server side and only render divs you need.

Answer 3

You can start those divs at display:none.