"hide and show div on the basis of select value"
Bootstrap 4.1.1 Snippet by gauravmeena0708

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> .form-control{ border-radius:0; } .full_box{ background: #eee; padding: 10px; margin-top: 50px; border-radius: 5px; } .head{ margin-bottom: 30px; } </style> </head> <body> <div class="container"> <div class="full_box"> <h2 class="head text-center" id="head">Div Hide Show with Select</h2> <div class="form_controls"> <div class="row"> <div class="form-group col-md-3"> <select class="form-control" id="select"> <option value="">Select</option> <option value="male">Male</option> <option value="female">Female</option> <option value="both">Transegender</option> </select> </div> </div> <div class="row" style="display: none" id="male"> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="name for Male" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="Email for male" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="Mobile for male" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="Password for male" name="pswd"> </div> </div> <div class="row" style="display: none" id="female"> <div class="form-group col-md-3" > <input type="text" class="form-control" id="pwd" placeholder="name for FeMale" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="Email for Female" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="Mobile For FeMale" name="pswd"> </div> <div class="form-group col-md-3"> <input type="text" class="form-control" id="pwd" placeholder="password For Female" name="pswd"> </div> </div> </div> </div> </div> <script> $(document).ready(function(){ $('#select').change(function(){ if($('#select').val()==""){ swal ( "Oops" , "Please Select Any one Option" , "error" ); }else{ } if($('#select').val()=="male"){ $('#male').show(); $('#head').html("You Select Male"); $('#head').css("color","green"); }else{ $('#male').hide(); } if($('#select').val()=="female"){ $('#female').show(); $('#head').html("You Selected Female"); $('#head').css("color","green"); }else{ $('#female').hide(); } if($('#select').val()=="both"){ $('#male').show(); $('#head').html("You Selected Transegender"); $('#head').css("color","green"); $('#female').show(); }else{ } }); }); </script> </body> </html>

Related: See More

Vue Now UI Kit
Creating password field text hide show via a single class
Multi Select Tiled Layout
Show Dropdown Hover & Caret Up

Questions / Comments: