"Drop Down Form Hide Field"
Bootstrap 3.1.0 Snippet by Dgc2002

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-lg-12"> <div class="page-header"> <h1 id="forms">Forms</h1> </div> </div> <div class="row"> <div class="col-lg-6"> <div class="well bs-component"> <form class="form-horizontal"> <fieldset> <legend>Legend</legend> <div class="form-group"> <label for="emailFrom" class="col-lg-2 control-label">From:</label> <div class="col-lg-10"> <select class="form-control" id="emailFrom" name="emailFrom"> <option>Select Email Address</option> <option value="Sergio Rodriguez|sergio.rodriguez@tix.com">Sergio Rodriguez (sergio.rodriguez@tix.com)</option> <option value="Silvia Mahoney|silvia.mahoney@tix.com">Silvia Mahoney (sergio.rodriguez@tix.com)</option> <option value="Steve Moore|steve.moore@tix.com">Steve Moore (sergio.rodriguez@tix.com)</option> <option value="Luke Perria|luke.perria@tix.com">Adam Hettinger (sergio.rodriguez@tix.com)</option> <option value="Luke Perria|luke.perria@tix.com">Luke Perea (sergio.rodriguez@tix.com)</option> </select> </div> </div> <div class="form-group"> <label for="emailTo" class="col-lg-2 control-label">To:</label> <div class="col-lg-10"> <select class="form-control" id="emailTo" name="emailTo"> <option>Select Email Address</option> <option value="Sergio Rodriguez|sergio.rodriguez@tix.com">Sergio Rodriguez (sergio.rodriguez@tix.com)</option> <option value="Silvia Mahoney|silvia.mahoney@tix.com">Silvia Mahoney (sergio.rodriguez@tix.com)</option> <option value="Steve Moore|steve.moore@tix.com">Steve Moore (sergio.rodriguez@tix.com)</option> <option value="Luke Perria|luke.perria@tix.com">Adam Hettinger (sergio.rodriguez@tix.com)</option> <option value="Luke Perria|luke.perria@tix.com">Luke Perea (sergio.rodriguez@tix.com)</option> <option value="0">Other</option> </select> </div> </div> <!-- Alternate Send To Email Name--> <div class="form-group emailAlternate"> <label for="emailName" class="col-lg-2 control-label">Name:</label> <div class="col-lg-5"> <input type="text" class="form-control" name="firstName" id="firstName" placeholder="First Name"> </div> <div class="col-lg-5"> <input type="text" class="form-control" name="lastName" id="lastName" placeholder="Last Name"> </div> </div> <!-- Alternate Send To Email Address--> <div class="form-group emailAlternate"> <label for="emailAddress" class="col-lg-2 control-label">Email:</label> <div class="col-lg-10"> <input type="text" class="form-control" name="emailAddress" id="emailAddress" placeholder="Email Address"> </div> </div> <div class="form-group"> <label for="emailSubject" class="col-lg-2 control-label">Subject:</label> <div class="col-lg-10"> <input type="text" class="form-control" name="emailSubject" id="emailSubject" size="35" placeholder="Subject"> </div> </div> <div class="form-group"> <label for="emailTemplate" class="col-lg-2 control-label">Message:</label> <div class="col-lg-10"> <select class="form-control" id="emailTemplate" name="emailTemplate"> <option>Select Email Template</option> <option value="TIX2Upgrade.html">TIX2 Upgrade</option> <option value="TIX2Links.html">TIX2 Links</option> </select> </div> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div>
//Purpose: toggle the visibility of fields depending on the value of another field $(document).ready(function () { toggleFields(); //call this first so we start out with the correct visibility depending on the selected form values //this will call our toggleFields function every time the selection value of our underAge field changes $("#emailTo").change(function () { toggleFields(); }); //Function: this toggles the visibility of the child field depending on the selected value of the parent function toggleFields() { if ($("#emailTo").val() == 0) $(".emailAlternate").show(); else $(".emailAlternate").hide(); } });

Related: See More


Questions / Comments: