How to hide controls and show new div based on the selected value from the dropdown

Question

I have a form with with three controls. Te page get loaded with those three controls. one of the controls is drop box which is populated with five items. Each selection have its own control to display. I have hidden all five div and will be showed based on the selected value.

1. Form will load with three controls
2. Select a value from drop-down
3. hide the fields and display the form/control based on the selected value
4. When you change the selected value, it must hide your previous selection
5. this must apply to any selected value in the drop-down

I have written java script function but it doesn't hide the loaded controls and show new form or div with the controls for that selection.

Question : How can i hide and show the div based on the selection from the drop-down?

I have tried this Example

here is my code below;

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>

View page

<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

The issue is that you need to hide ALL the other divs, not just one as you are currently doing.

You can solve this by applying a class to each of the display divs, adding the hidden class to any element with that class, and then making the selected div visible.

Or you could manually hide all the divs in each case in the event listener but that would be unnecessarily reptitive.

Answer 2

You should definitely add a class to all the divs that needs hidden. This allows you to hide all of them at once, then show the one that is being selected. The reason some of your divs were not displaying was due to typos in your JS. Here is a working fiddle.

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

Answer 3

Try this working example,

 $(document).ready(function () { function hideAll(){ $("#divUsers, #divOrders, #divContractors, #divPermanet, #divReport").hide(); } hideAll(); $('#ddlControls').on('change', function () { 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>