컨트롤을 숨기고 드롭 다운에서 선택한 값을 기반으로 새 div를 표시하는 방법

Question

3 개의 컨트롤이있는 양식이 있습니다. Te 페이지에는 세 가지 컨트롤이로드됩니다. 컨트롤 중 하나는 5 개의 항목으로 채워진 드롭 상자입니다. 각 선택 항목에는 표시 할 자체 컨트롤이 있습니다. 나는 5 개의 div를 모두 숨겨두고 선택된 값에 따라 보여 질 것입니다.

1. 양식은 세 가지 컨트롤
2. 와 함께로드됩니다, 그것을 선택한 값을 변경하면 선택된 값
3. 에 따라 양식/제어를
4. 이 필드를 숨기 드롭 다운에서 값을 선택하고 표시 이전 선택
5. 이 내가 자바 스크립트 기능 BU를 작성했습니다 드롭 다운

에서 선택한 값에 적용해야합니다 숨겨야합니다 로드 된 컨트롤을 숨기지 않고 해당 컨트롤의 새 폼이나 div를 표시하지 않습니다.

질문 : 드롭 다운의 선택에 따라 div를 숨기고 표시하려면 어떻게합니까?

내가 시도이 여기 Example

아래에있는 내 코드입니다;

자바 스크립트

<script type="text/javascript"> 
     $(document).ready(function() { 
      $('#ddlControls').on('change', function() { 
       if (this.value == 'Users') { 
        $("#divUsers").show(); 
        alert("Users"); 
       } 

       else if (this.value == 'Orders') { 
        $("#divUsers").hide(); 
        $("#divOrders").show(); 
        alert("orders here"); 
       } 
       else if (this.value == 'Contractors') { 
        $("#divOrders").hide(); 
        $("#divContractors").show(); 
        alert("Contractors here"); 
       } 
       else if (this.value == 'Permanets') { 
        $("#divContractors").hide(); 
        $("#divPermanets").show(); 
        alert("Permanets here"); 
       } 
       else if (this.value == 'Reports') { 
        $("#Permanets").hide(); 
        $("#divReports").show(); 
        alert("Reports here"); 
       } 
       else { 
        $("#divReports").hide(); 
       } 
      }); 
     }); 
    </script> 

보기 페이지 문제는 당신이 현재 모든 다른 div가 아닌 하나를 숨길 필요가있다

<section> 
<div class="row"> 
    <fieldset class="fieldsetStyle"> 
     <form role="form"> 
      <div class="box-body"> 
       <div class="col-md-5" id="divContainer"> 

        <div class="form-group"> 
         <label for="ddlControls">Report Category :</label> 
         <select class="form-control" id="ddlControls"> 
          <option value="-1">--Select--</option> 
          <option id="Users" value="Users">All Users</option> 
          <option id="Orders" value="Orders">All Orders</option> 
          <option id="Contractors" value="Contractors">All Contractors</option> 
          <option id="Permanets" value="Permanets">All Permanets</option> 
          <option id="Reports" value="Reports">All Reports</option> 
         </select> 
        </div> 

        <div class="form-group"> 
         <label for="txt1">Report Number</label> 
         <input type="text" class="form-control" id="txt1"> 
        </div> 

        <div class="form-group"> 
         <label for="txt2">Order Number:</label> 
         <input type="text" class="form-control" id="txt2"> 
        </div> 

        <!--Here are all my hidded div that i want to show based on the selection of report catergory--> 
        <div class="hidden" id="divUsers"> 
         <h2>I want to show this div for Users</h2> 
         <!--I will have more controls here--> 
        </div> 

        <div class="hidden" id="divOrders"> 
         <h2>I want to show this for Orders</h2> 
         <!--I will have more controls here--> 
        </div> 

        <div class="hidden" id="divContractors"> 
         <h2>I want to show this div for Contractors</h2> 
         <!--I will have more controls here--> 
        </div> 

        <div class="hidden" id="divPermanet"> 
         <h2>I want to show this div for Permanet</h2> 
         <!--I will have more controls here--> 
        </div> 

        <div class="hidden" id="divReport"> 
         <h2>I want to show this div for Report</h2> 
         <!--I will have more controls here--> 
        </div> 
       </div> 
      </div> 
     </form> 
    </fieldset> 
    </div> 

Answer 1

당신이 변화를 실행 않는 기능을 가정하면

$(document).ready(function() { 
 
    function hideAll(){ 
 
     $("#divUsers, #divOrders, #divContractors, #divPermanet, #divReport").hide(); 
 
     } 
 
    
 
    hideAll(); 
 
    
 
      $('#ddlControls').on('change', function() {    \t 
 
        hideAll(); 
 
       
 
       if (this.value == 'Users') { 
 
        $("#divUsers").show(); 
 
        alert("Users"); 
 
       } 
 

 
       else if (this.value == 'Orders') { 
 
        $("#divOrders").show(); 
 
        alert("orders here"); 
 
       } 
 
       else if (this.value == 'Contractors') { 
 
        $("#divContractors").show(); 
 
        alert("Contractors here"); 
 
       } 
 
       else if (this.value == 'Permanets') { 
 
        $("#divPermanet").show(); 
 
        alert("Permanets here"); 
 
       } 
 
       else if (this.value == 'Reports') { 
 
        $("#divReport").show(); 
 
        alert("Reports here"); 
 
       } 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <fieldset class="fieldsetStyle"> 
 
     <form role="form"> 
 
      <div class="box-body"> 
 
       <div class="col-md-5" id="divContainer"> 
 

 
        <div class="form-group"> 
 
         <label for="ddlControls">Report Category :</label> 
 
         <select class="form-control" id="ddlControls"> 
 
          <option value="-1">--Select--</option> 
 
          <option id="Users" value="Users">All Users</option> 
 
          <option id="Orders" value="Orders">All Orders</option> 
 
          <option id="Contractors" value="Contractors">All Contractors</option> 
 
          <option id="Permanets" value="Permanets">All Permanets</option> 
 
          <option id="Reports" value="Reports">All Reports</option> 
 
         </select> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <label for="txt1">Report Number</label> 
 
         <input type="text" class="form-control" id="txt1"> 
 
        </div> 
 

 
        <div class="form-group"> 
 
         <label for="txt2">Order Number:</label> 
 
         <input type="text" class="form-control" id="txt2"> 
 
        </div> 
 

 
        <!--Here are all my hidded div that i want to show based on the selection of report catergory--> 
 
        <div id="divUsers"> 
 
         <h2>I want to show this div for Users</h2> 
 
         <!--I will have more controls here--> 
 
        </div> 
 

 
        <div id="divOrders"> 
 
         <h2>I want to show this for Orders</h2> 
 
         <!--I will have more controls here--> 
 
        </div> 
 

 
        <div id="divContractors"> 
 
         <h2>I want to show this div for Contractors</h2> 
 
         <!--I will have more controls here--> 
 
        </div> 
 

 
        <div id="divPermanet"> 
 
         <h2>I want to show this div for Permanet</h2> 
 
         <!--I will have more controls here--> 
 
        </div> 
 

 
        <div id="divReport"> 
 
         <h2>I want to show this div for Report</h2> 
 
         <!--I will have more controls here--> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </form> 
 
    </fieldset> 
 
    </div>

Answer 2

하기.

각 디스플레이 div에 클래스를 적용하고 해당 클래스가있는 요소에 숨겨진 클래스를 추가 한 다음 선택한 div를 표시하여 해결할 수 있습니다.

또는 이벤트 리스너에서 각 div를 수동으로 숨길 수는 있지만 불필요한 reptitive가됩니다.

Answer 3

숨겨진 필요가있는 모든 div에 반드시 클래스를 추가해야합니다. 이렇게하면 모든 항목을 한 번에 숨기고 선택한 항목을 표시 할 수 있습니다. 일부 div가 표시되지 않는 이유는 JS의 오타가 원인이었습니다. Here은 작동하는 바이올린입니다.

작업 자바 스크립트 :

$(function() { 
    $('#ddlControls').on('change', function() { 
     $('.select-div').hide(); 
     if (this.value == 'Users') { 
      $("#divUsers").show(); 
      alert("Users"); 
      } 
      else if (this.value == 'Orders') { 
       $("#divOrders").show(); 
       alert("orders here"); 
      } 
      else if (this.value == 'Contractors') { 
       $("#divContractors").show(); 
       alert("Contractors here"); 
      } 
      else if (this.value == 'Permanets') { 
       $("#divPermanet").show(); 
       alert("Permanets here"); 
      } 
      else if (this.value == 'Reports') { 
       $("#divReport").show(); 
       alert("Reports here"); 
      } 
    }); 
});