Span/Eingang ausblenden, wenn ausgewählt Wert ist SMTH

Question

Ich habe mit Optionen ausgewählt und ich habe viele Eingänge. Ich muss die Eingabe bereithalten, wenn ich in der Option zum Beispiel "USER" auswähle und sie wieder auschecke, wenn ich eine andere Option wähle.

<form class="form-signup" action="admin_users.php" method="POST" id="payment-form"> 
 

 
       <div class="well well-sm"> 
 
       \t <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> 
 

 
       \t <div class="form-group"> 
 
        <div class="col-xs-12"> 
 
       \t \t <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"> 
 
       \t \t <input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required> 
 
</div> 
 
<div> &nbsp </div> 
 

 
\t    <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"> 
 
        \t <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> 
 

 
        \t <div class="form-group"> 
 
         <div class="col-xs-12"> 
 
        \t \t <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"> 
 
        \t \t <input type="text" class="form-control" id="fname" name="fname" placeholder="Ad" value="second input" required> 
 
    </div> 
 
    <div> &nbsp </div> 
 

 
    \t    <input class='btn btn-primary' type='submit' name='addUser' value='Create user' /> 
 
        </div> 
 
        </form>

Answer 2

ich ein benutzerdefiniertes Attribut namens valueTie verwenden würde. Wenn Sie die Auswahl aktualisieren, wird Ihr Inhalt automatisch entsprechend aktualisiert. Was ist schön, ist alles, was Sie tun müssen, ist eine andere Option und ein anderes div mit dem Attribut valueTie hinzufügen und Sie sind mit einer anderen Option ausgeführt.

$("#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>