Javascript показать / скрыть в зависимости от выпадающего
У меня уже есть следующий код, чтобы показать / скрыть два элемента формы на основе выпадающего списка. Это сработало, когда на странице был единственный экземпляр формы с использованием идентификаторов. Теперь есть несколько форм, которые используют классы. я пробовалgetElementsByClass
но по какой-то причине это не работает.
Вот 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
должен появиться (и реферал должен скрыться).