Javascript mostrar / ocultar com base no menu suspenso
Eu já tenho o seguinte código para mostrar / ocultar dois elementos de formulário com base em uma seleção suspensa. Funcionou quando havia uma única instância de um formulário na página usando IDs. Agora há vários formulários, que usam classes. eu tenteigetElementsByClass
mas por alguma razão não está funcionando.
Aqui está o 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='';
}
}
}
E o 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>
Quando a referência é selecionada no menu suspenso, o rótuloclass=Referral
e entradaclass=Referral2
deve aparecer. Após a seleção de outro, etiquetaclass=Other
e entradaclass=Other2
deve aparecer (e a referência deve se esconder).