display/hide textbox based on drop down list

Question

For-example I've got a code:

<form name="myform">
<table>
<td>
<select name="one" onchange="if (this.selectedIndex=='other'){this.myform['other'].style.visibility='visible'}else {this.myform['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>
</table>
</form>

I need the textbox to appear when option "other" is selected. The above code is not working :(

Answer 1

selectedIndex gives an index i.e. a number, so the index for "other" is 8, you can get the value of the selected option from the value property of the select element. To access the form a control is in use the elements form property this.form, also your you table cells should be in a row.

<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>

Answer 2

    <form name="myform">
       <table>
         <td>
           <select name="one" onchange="if (this.options[this.selectedIndex].value =='other'){document.myform['other'].style.visibility='visible'}else {document.myform['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>
    </table>
 </form>​