Display and Hide text box when select the particular option from the dropdown list.

This is one of the simple javascript trick to display and hide text box when select the particular option from the dropdown list.

This concept is useful some time for example some forms contains "how you know about us" field like that in this filed we contain dropdown list for example website, others, media, and etc...  when we click others it shows the input field to enter the option manually.

Code:

<form name="myform">

<table>

<tr>

<td>

<select name="one" onchange="if (this.value=='other'){this.form['other'].style.visibility='visible'}else {this.form['other'].style.visibility='hidden'};">

<option value="" selected="selected">Select...</option>

<option value="1">1</option>

<option value="2">3</option>

<option value="3">3</option>

<option value="4">4</option>

<option value="5">5</option>

<option value="6">6</option>

<option value="7">7</option>

<option value="other">Other</option>

</select>

<input type="textbox" name="other" style="visibility:hidden;"/>

</td>

</tr>

</table>

</form>