我已經有以下代碼來顯示/隱藏兩個基於下拉選擇的表單元素。它在使用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對不起,我更新了帖子更多代碼 –