드롭 다운 선택을 기반으로 양식 필드의 다른 조합을 표시

Question

나는 사회가 골프 클럽에서 제공되는 패키지에 대해 문의 할 수 있도록 웹 양식을 만들고 있습니다. 각기 다른 조합의 활동을 제공하는 7 가지 패키지가 제공됩니다.

드롭 다운 메뉴에서 패키지를 선택하면 적절한 필드 조합이 아래와 같이 표시되도록 양식을 설정하려고합니다. 사용자가 패키지를 선택하면 각 활동에 참석하는 사람의 수, 각 활동에 대한 선호 시간 및 각각에 대한 메뉴 선택 항목을 채 웁니다. 이것은 양식의 유일한 부분으로 이름, 사회 이름, 이메일, 추가 의견 등과 같은 세부 사항이 항상 표시됩니다.

나는 ID 태그 등으로 자신의 테이블에 각 필드 (즉, 모닝 커피, 점심 식사 등)을 넣어 시도했습니다. <table id="summerSaver">. 이 테이블에는 적절한 입력 상자 (시간, 사람 수, 메뉴 선택 등)가 포함되어있었습니다. 그런 다음 CSS 규칙을 사용하여 예를 들어 모두 숨겨져 있는지 확인했습니다. #summerSaver{display:none;}. 나는 그 때 표시해야하는지에 따라 CSS 규칙을 변경하는 자바 스크립트를 사용 :

이

<script type='text/javascript'> 
window.onload=function(){ 
    var select = document.getElementById("pack"); 
    select.onchange=function(){ 
     //Summer Saver 
     if(select.value=="summerSaver"){ 
      document.getElementById("morningcoffee").style.display="inline"; 
      document.getElementById("bacon").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("morningcoffee").style.display="none"; 
      document.getElementById("bacon").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Full Round 
     if(select.value=="fullRound"){ 
      document.getElementById("morningcoffee").style.display="inline"; 
      document.getElementById("lunch").style.display="inline"; 
      document.getElementById("dinner").style.display="inline"; 
      document.getElementById("dessert").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("morningcoffee").style.display="none"; 
      document.getElementById("lunch").style.display="none"; 
      document.getElementById("dinner").style.display="none"; 
      document.getElementById("dessert").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Early Starter 
     if(select.value=="earlyStarter"){ 
      document.getElementById("morningcoffee").style.display="inline"; 
      document.getElementById("lunch").style.display="inline"; 
      document.getElementById("breakfast").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("morningcoffee").style.display="none"; 
      document.getElementById("lunch").style.display="none"; 
      document.getElementById("breakfast").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Light Lunch 
     if(select.value=="lightLunch"){ 
      document.getElementById("morningcoffee").style.display="inline"; 
      document.getElementById("lunch").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("morningcoffee").style.display="none"; 
      document.getElementById("lunch").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Eighteen Holer 
     if(select.value=="eighteenHoler"){ 
      document.getElementById("dinner").style.display="inline"; 
      document.getElementById("dessert").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("dinner").style.display="none"; 
      document.getElementById("dessert").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Good Value Day 
     if(select.value=="valueDay"){ 
      document.getElementById("dinner").style.display="inline"; 
      document.getElementById("diet").style.display="inline"; 
     }else{ 
      document.getElementById("dinner").style.display="none"; 
      document.getElementById("diet").style.display="none"; 
     } 
     //The Easy Round 
     if(select.value=="easyRound"){ 
      document.getElementById("morningcoffee").style.display="inline"; 
     }else{ 
      document.getElementById("morningcoffee").style.display="none"; 
     } 
    } 
} 
</script> 

오전 데 문제가 올바른 테이블이 표시되지 않는 것입니다. 예를 들어, Summer Saver는 Bacon Sandwiches와 The Full Round 만 보여줍니다. 추가 검사시 페이지에는 각 패키지에 대해 하나의 테이블 만 표시되거나 전혀 표시되지 않습니다.

Javascript와 JQuery에 관해서는 약간의 초보자이기 때문에 도움을 주시면 감사하겠습니다.

Answer 1

I하지 보았다 코드에 너무 가까이 있지만 쉽게 jQuery를 함께 수행 할 수 있습니다 :

$(function(){ 
    var $table = $('#table'); 
    $('#package').on('change', function(){ 
     $table.find('tr').show().filter('.filter:not(.package_'+this.value+')').hide() 
    }).trigger('change'); 
}); 

모든 행이 수업을 :

http://jsfiddle.net/TSDb6/1/

이 내가 사용하는 JS입니다 표시해야 할 시점을 정의합니다. 이렇게하면 필요한 js가 줄어들고 새 패키지를 쉽게 변경하거나 추가 할 수 있습니다.

드롭 다운 값이 변경 될 때마다 모든 테이블 행이 표시되고 해당 package_x 클래스가없는 패키지 (.filtered)에 따라 필터링되어야하는 행이 숨겨집니다.