Mr Junior Mr Junior - 29 days ago 8
Javascript Question

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

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

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>

Comments