Javascript 根据下拉列表显示/隐藏文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12158737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
display/hide textbox based on drop down list
提问by Patrick
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 :(
I need the textbox to appear when option "other" is selected. 上面的代码不起作用:(
回答by Musa
selectedIndexgives 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.
selectedIndex给出一个索引，即一个数字，所以“other”的索引是 8，你可以从 select 元素的 value 属性中获取所选选项的值。要访问表单，控件正在使用元素表单属性this.form，您的表格单元格也应该在一行中。
<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>
回答by Viktor S.
<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>?
回答by vijay kondal
<form name="myform">
<table>
<td>
<select name="one" id="mySelect">
<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>
<script type="text/javascript">
$('#mySelect').bind('onchange',function(){
if (this.value==='other')
{
this.myform['other'].style.visibility='visible'
}
else {
this.myform['other'].style.visibility='hidden'};
}
</script>
回答by defau1t
First of all enclose your tdin a trand then below is the DEMO
首先把你的td放在 a 中tr，然后下面是 DEMO
回答by Sukanya Suku
<form name="form" action="" method="post">
<table>
<tr>
<td>
<select name="one" onchange="if (this.value=='yes'){this.form['yes'].style.visibility='visible'}else {this.form['yes'].style.visibility='hidden'};">
<option value="" selected="selected">Select...</option>
<option value="yes">yes</option>
<option value="no">no</option>
</select>
<input type="text" name="yes" style="visibility:hidden;"/>
</td>
</tr>
</table>
</form>
回答by Raj
$(document).ready(function () {
$('#types').change(function () {
if ($('#types').val() == 'Other') {
$('#other').show();
}
else {
$('#other').hide();
}
});
});
<body>
<form id="form1" runat="server">
<div>
<select id="types" name="types">
<option value="Type 1">Type 1</option>
<option value="Type 2">Type 2</option>
<option value="Type 3">Type 3</option>
<option value="Other">Other</option>
</select>
<input type="text" id="other" name="other" style="display: none;" />
</div>
</form>
回答by Prakruthi HM
JQuery
查询
$(document).ready(function() {
$("select").change(function() {
$(this).find("option:selected").each(function() {
if ($(this).attr("value") == "class") {
$(".box").not(".class_name").hide();
$(".class_name").show();
$(".box").not(".class_name").val("");
}
else if ($(this).attr("value") == "ref") {
$(".box").not(".ref_id").hide();
$(".ref_id").show();
$(".box").not(".ref_id").val("");
}
else {
$(".box").hide();
}
});
}).change();
});
HTML
HTML
<div>
<select>
<option>Choose</option>
<option value="class">Class</option>
<option value="ref">Particular</option>
</select>
</div>
<div class="class_name box">
Class Name: <input type="text" name="c">
</div>
<div class="ref_id box">
Reference_id : <input type="text" name="r">
</div>
回答by codingbiz
this.selectedIndexreturns an integer not a string. Something like 0,1,2 and probably 8 for 'others'. 8 == 'other'can never be true
this.selectedIndex返回一个整数而不是一个字符串。对于“其他人”来说，像 0,1,2 和可能是 8 之类的东西。8 == 'other'永远不可能是真的
try this
尝试这个
onchange="if (this.options[this.selectedIndex].value =='other')"
