我已经有以下代码来显示/隐藏两个基于下拉选择的表单元素。它在使用ID的页面上有一个表单的单个实例时起作用。现在有多种形式,它们使用类。我试过getElementsByClass
,但由于某种原因,它不起作用。Javascript显示/隐藏基于下拉列表
这里是JavaScript:
function Toggle(obj){
var val=obj.value;
if (!obj.m){ obj.m=''; }
if (!obj.m.match(val)){ obj.m+=','+val+','; }
var hide=obj.m.split(',');
for (var zxc0=0;zxc0<hide.length;zxc0++){
if (document.getElementsByClassName(hide[zxc0])){
document.getElementsByClassName(hide[zxc0]).style.display='none';
}
}
var show=val.split(',');
for (var zxc1=0;zxc1<show.length;zxc1++){
if (document.getElementsByClassName(show[zxc1])){
document.getElementsByClassName(show[zxc1]).style.display='';
}
}
}
和HTML:
<form class="contact" name="contact" action="#" method="post">
<label>How did you hear about us:</label>
<div id="styled-select">
<select name="how" onChange="Toggle(this);" class="dropdown">
<option value="Internet Search">Internet Search</option>
<option value="Facebook" >Facebook</option>
<option value="Twitter" >Twitter</option>
<option value="LinkedIN" >LinkedIN</option>
<option value="Referral,Referral2" >Referral</option>
<option value="Other,Other2">Other</option>
</select>
</div>
<label class="Referral" style="display:none;">Referred By:</label>
<input name="Referral2" style="display:none;" class="hidden-txt Referral2">
<label class="Other" style="display:none;">Please Specify:</label>
<input name="Other2" value="" style="display:none;" class="hidden-txt Other2">
...
</form>
复诊时从下拉列表中选择,标签class=Referral
和输入class=Referral2
应该会出现。在选择其他时,标签class=Other
和输入class=Other2
应该出现(并且转介应该隐藏)。
你错过了把代码 – closure
@raghow对不起,我更新了帖子更多代码 –