자바 스크립트 표시/숨기기 드롭 다운을 기반으로

Question

드롭 다운 선택을 기반으로 두 가지 양식 요소를 표시하거나 숨기려면 다음 코드가 이미 있습니다. 그것은 ID를 사용하여 페이지에 폼의 단일 인스턴스가있을 때 작동했습니다. 이제 클래스를 사용하는 여러 형식이 있습니다. getElementsByClass을 시도했지만 어떤 이유로 작동하지 않습니다.

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이 나타나야합니다 (참조는 숨겨야합니다).

Answer 1

순수 JS가 요구되지 않는 한 JQuery를 사용하는 것이 더 빠르고 쉽다고 생각합니다.

작업 예 :http://jsfiddle.net/p8ARq/2/

JQuery와

$("select").change(function() { 
    // hide all optional elements 
    $('.optional').css('display','none'); 

    $("select option:selected").each(function() { 
     if($(this).val() == "Referral") { 
      $('.referral').css('display','block'); 
     } else if($(this).val() == "Other") { 
      $('.other').css('display','block'); 
     } 
    }); 
}); 

HTML

<form class="contact" name="contact" action="#" method="post"> 
    <label>How did you hear about us:</label> 
    <div id="styled-select"> 
     <select name="how" 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" >Referral</option> 
      <option value="Other">Other</option> 
     </select> 
    </div> 
    <label class="optional referral" style="display:none;">Referred By:</label> 
    <input class="optional referral" name="Referral2" style="display:none;" class="hidden-txt"> 
    <label class="optional other" style="display:none;">Please Specify:</label> 
    <input class="optional other" name="Other2" value="" style="display:none;" class="hidden-txt"> 
    <label for="signup" class="text-checkbox">Add me to your email list</label> 
    <input type="checkbox" name="signup" value="Yes" class="checkbox"> 
    <button class="send">Submit</button>     
</form>​ 

Answer 2

이 스크립트를 사용하면 변수가 변경됩니다.

<script type="text/javascript"> 
function ChangeDropdowns(value){ 
    if(value=="los"){ 
     document.getElementById('provider').style.display='none'; 
    }else if(value=="icm"){ 
     document.getElementById('provider').style.display='block'; 
    } 
} 
</script> 

<select id="abonnement" name="abonnement" onchange="ChangeDropdowns(this.value);"> 
    <option value="">Selecteer soort</option> 
    <option value="los">Los toestel</option> 
    <option value="icm">Toestel icm abonnement</option> 
</select> 

<select id="provider" name="provider"> 
    <option value="">Selecteer een provider</option> 
    <option value="">Maakt niet uit</option> 
</select>