[英]Help with javascript onchange and showing/hiding table content
I'd like to show / hide a div within a td tag based on the select value chosen. 我想根据所选的选择值在td标签中显示/隐藏div。 I cannot get the label text to appear, only the textbox. 我无法显示标签文本,只能显示文本框。 Can someone please give me a hand with this? 有人可以帮我吗?
Here is my code so far 到目前为止,这是我的代码
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.myform.other.style.visibility = 'visible';
} else {
document.myform.other.style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[ document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
Give the element an id: 给该元素一个ID:
<div id="Other" style="visibility:hidden">
Now you can easily access it in the code: 现在,您可以在代码中轻松访问它:
document.getElementById('Other').style.visibility = 'visible';
Here's the code with the changes, tested and working: 这是经过更改且经过测试且可以正常工作的代码:
<script>
function toggleOther(chosen){
if (chosen == 'oth') {
document.getElementById('Other').style.visibility = 'visible';
} else {
document.getElementById('Other').style.visibility = 'hidden';
document.myform.other.value = '';
}
}
</script>
<form name="myform">
<tr>
<td>
<select name="values" size="1" onchange="toggleOther( document.myform.values.options[
document.myform.values.selectedIndex ].value );">
<option value=" " selected="selected"> </option>
<option value="name">Name</option>
<option value="age">Age</option>
<option value="oth">Other</option>
</select>
</td>
<td>
<div id="Other" style="visibility:hidden">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
</td>
</tr>
</form>
The problem is that you have set visibility on your containing <div>
to hidden
but your javascript is only showing your input. 问题是您已将包含<div>
可见性设置为hidden
但是您的JavaScript只显示了您的输入。 ( document.myform.other.style.visibility
) ( document.myform.other.style.visibility
)
To make it work, simply give your <div>
an id
and show and hide that instead: 要使其工作,只需给您的<div>
一个id
并显示和隐藏它即可:
// ... snip ...
function toggleOther(chosen){
var piece_to_hide = document.getElementById("otherValues");
if (chosen == 'oth') {
piece_to_hide.style.display = 'block';
} else {
piece_to_hide.style.display = 'none';
document.myform.other.value = '';
}
}
// ... snip ...
<div id="otherValues" style="display:none">
<label>adfdasfgsfg</label>
<input type="text" name="other" value="" size="25" />
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.