Как скрыть элементы управления и показать новый div на основе выбранного значения из выпадающего списка

Question

У меня есть форма с тремя элементами управления. Страница Te загружается с этими тремя элементами управления. одним из элементов управления является окно сбрасывания, которое заполняется пятью элементами. Каждый выбор имеет свой собственный контроль для отображения. Я спрятал все пять div и будет показан на основе выбранного значения.

1. Форма будет загружаться с тремя управления
2. Выберите значение из выпадающего
3. скрыть поля и отображения формы/управления на основе выбранного значения
4. При изменении выбранного значения, его необходимо скрыть ваш предыдущий выбор
5. это должно относиться к любому выбранному значению в раскрывающемся

я написал Java-скрипт функцию номе t он не скрывает загруженные элементы управления и не показывает новую форму или div с элементами управления для этого выбора.

Вопрос: Как я могу скрыть и показать div на основе выбора из раскрывающегося списка?

Я попытался это Example

вот мой код ниже;

Java Script

<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> 

Просмотр страницы

<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 в каждом случае в прослушивателе событий, но это будет излишне рептиптическим.

Answer 3

Вы должны обязательно добавить класс ко всем разделам, которые должны быть скрыты. Это позволяет вам сразу скрыть все, а затем отобразить выбранное. Причина, по которой некоторые из ваших divs не отображались, была связана с опечатками в вашем JS. Here - рабочая скрипка.

Рабочий JavaScript:

$(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"); 
      } 
    }); 
});