select에서 전체 div를 표시하는 방법

Question

누군가가 태그에서 특정 옵션을 선택할 때마다 그 안에 양식이있는 div를 표시하는 데 도움이 필요합니다. 내 코드는 다음과 같습니다.

<script type="text/javascript"> 
     $(function() { 
      $('#contactOptionSelect').change(function() { 
        $('.emailForm').hide(); 
        $('#' + $(this).val()).show(); 
       }); 
      }); 

    </script> 
     <div class="contactSelect" id="contactOptionSelect"> 
      <label for="selectContact">Contact us: </label> 
      <select name="selectContact" class="selectContactType" style="width: 150px;"/> 
       <option class="opt" value="">Please select</option> 
       <option class="opt" id="helpOpt" value="">Help and Support</option> 
       <option class="opt" id="emailOpt" value="">Email</option> 
       <option class="opt" id="visitOpt" value="">Visit us!</option> 
       <option class="opt" id="phoneOpt" value="">Phone</option> 
      </select> 
     </div>  
     <div class="emailForm" id="emailFormId"> 
      <form id="contactUsForm" method="post" action=""> 
       <div class="formSubject"> 
        <label for="inputSubject">Subject</label> 
        <input type="text" width="50px" id="inputSubject" /> 
       </div> 
       <div class="formBody"> 
        <label for="inputBody">Email</label> 
        <textarea rows="15" cols="50" id="inputBody"></textarea> 
       </div> 
       <div class="formSubmit"> 
        <input type="submit" id="inputSubmit" value="Send!"/> 
       </div> 
      </form> 
     </div> 

이메일 옵션을 선택하면 마지막 양식을 표시하려고합니다. 나는 이것이 다음과 같이 작동하기를 원합니 다. http://www.apple.com/privacy/contact/ 높은 기준 내가 알고 있지만 무엇이든 하하 어떤 도움을 주셔서 미리 감사드립니다!

Answer 1

당신이 뭔가를 찾고 계십니까? 선택 옵션이 변경 될 때마다 http://jsbin.com/okakuy/edit#javascript,html

, 우리는 div 표시이며, 그 id 속성으로 현재 선택 값을 갖는 중 div 공연 중 숨 깁니다.

$("#parts").on("change", function(o){ 
    $(".panels") 
    .find("> div:visible") 
     .slideUp() 
    .end() 
    .find("#" + o.target.value) 
     .slideDown(); 
}); 

이 태그와 결합 :

<select id="parts"> 
    <option>foo1</option> 
    <option>foo2</option> 
    <option>foo3</option> 
</select> 
<div class="panels"> 
    <div id="foo1">This is foo1</div> 
    <div id="foo2">This is foo2</div> 
    <div id="foo3">This is foo3</div> 
</div>