jquery - Display input when specific option selected -
i have button
shows select
containing various options. when select particular option
want display input
field using jquery. how can this?
<button type="button" class="btn btn-default btn-sm" id="button1" style="float:right"> <span class="glyphicon glyphicon-plus"></span> add additional contact details </button> <select id="select" hidden class="col-lg-2"> <option>type</option> <option id="op1">work</option> <option id="op2">home</option> <option id="op3">email</option> </select> <div class="form-group" id="v1" hidden> <label class="control-label col-lg-2">work:</label> <div class="col-lg-4"> <input type="text" class="form-control"/> </div> </div>
$(document).ready(function(){ $("#button1").click(function(){ $("#select").show(); }); $("#op1").click(function () { $("#v1").show(); });
try
$(document).ready(function() { $("#button1").click(function() { $("#select").show(); }); $("#select").change(function() { $("#v1").toggle($('#op1').is(':selected')); //if want toggle input selected value //$("#v1").toggle(this.value == 'work'); }); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="btn btn-default btn-sm" id="button1" style="float:right"> <span class="glyphicon glyphicon-plus"></span>add additional contact details </button> <select id="select" hidden class="col-lg-2"> <option>type</option> <option id="op1">work</option> <option id="op2">home</option> <option id="op3">email</option> </select> <div class="form-group" id="v1" hidden> <label class="control-label col-lg-2">work:</label> <div class="col-lg-4"> <input type="text" class="form-control" /> </div> </div>
Comments
Post a Comment