跨度/隐藏输入（如果选择的值是SMTH）

Question

I have select with options and I have many inputs. I need to span ready input if I select in option for example "USER" and hide it again if select another option.

 <form class="form-signup" action="admin_users.php" method="POST" id="payment-form"> <div class="well well-sm"> <h3 class="form-signin-heading"> Create <select id="selectlist" name="selectproduct" > <option value="1">User</option> <option value="2">Admin</option> <option value="3">Smth else</option> <option value="4">Smth else of else</option> </select> </h3> <div class="form-group"> <div class="col-xs-12"> <input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus> </div> <div> &nbsp </div> <div class="col-xs-12"> <input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required> </div> <div> &nbsp </div> <input class='btn btn-primary' type='submit' name='addUser' value='Create user' /> </div> </form> 

Answer 1

 $( "#selectlist" ).change(function(event) { if (this.value == 1 || this.value == 2) { $(".form-control").show(); } else { $(".form-control").hide(); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-signup" action="admin_users.php" method="POST" id="payment-form"> <div class="well well-sm"> <h3 class="form-signin-heading"> Create <select id="selectlist" name="selectproduct" > <option value="1">User</option> <option value="2">Admin</option> <option value="3">Smth else</option> <option value="4">Smth else of else</option> </select> </h3> <div class="form-group"> <div class="col-xs-12"> <input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus> </div> <div> &nbsp </div> <div class="col-xs-12"> <input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required> </div> <div> &nbsp </div> <input class='btn btn-primary' type='submit' name='addUser' value='Create user' /> </div> </form> 

Answer 2

I would use a custom attribute called valueTie . When you update the select, your content will automatically update accordingly. What's nice is all you have to do is add another option and another div with the attribute valueTie and you're up and running with another option.

 $("#selectlist").change(function () { $("[valueTie]").hide() $("[valueTie='" + $(this).val() + "']").show(); }); $("#selectlist").change(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form class="form-signup" action="admin_users.php" method="POST" id="payment-form"> <div class="well well-sm"> <h3 class="form-signin-heading"> Create <select id="selectlist" name="selectproduct" > <option value="1">User</option> <option value="2">Admin</option> </select> </h3> <div class="form-group"> <div class="col-xs-12" valueTie="1"> <input class="form-control" type="text" name="username" id="username" placeholder="İstifadəçi" value="first input" required autofocus> </div> <div class="col-xs-12" valueTie="2"> <input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required> </div> <div> &nbsp </div> <input class='btn btn-primary' type='submit' name='addUser' value='Create user' /> </div> </form>