根据下拉列表显示/隐藏文本框 [英] display/hide textbox based on drop down list

问题描述

例如我有一段代码：

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>

选择选项other时，我需要显示文本框。上面的代码不起作用：（$ / b>

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

推荐答案

selectedIndex 即一个数字，所以其他的索引是8，你可以从select元素的value属性中获得所选择的选项的值，为了访问表单，正在使用的控件的元素形式为property this.form ，您的表格单元格也应该放在一行中。

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>

这篇关于根据下拉列表显示/隐藏文本框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！