Wie man ein Formular durch Auswahl des Tags ändert?

Question

Ich möchte aus wie dieses ein <select> Tag über ein erstellen -

<select> 
    <option value="Student">Student</option> 
    <option value="Teacher">Teacher</option> 
</select> 

, wenn ich wählen Sie "Student" zeigen Studenten unten bilden. und wenn ich "Lehrer" wähle, dann zeige Lehrerformular unten. Wie kann ich das mit Bootstrap oder Jquery oder Javascript machen?

Answer 1

Sie können es auf diese Weise tun:

Answer 2

Versuchen Sie, diese mit jQuery:

$('select').on('change', function() { 
    if(this.value == "Student") { 
    // Show Student Form 
    // hide teacher form 
    } else if (this.value == "Teacher") { 
    // Show Teacher Form 
    // hide student form 
    } 
}); 

Answer 3

Dies ist ein grobes Beispiel dafür, was Sie versuchen zu tun. Es sollte dir eine Vorstellung davon geben, wo du hingehen sollst.

$(document).ready(function(){ 
 
    $(".content").hide(); 
 
    $('#my-select').on('change', function() { 
 
     if (this.value == 'Student') 
 
     { 
 
     $(".content").hide(); 
 
     $("#content-1").show(); 
 
     } 
 
     else if (this.value == 'Teacher') 
 
     { 
 
     $(".content").hide(); 
 
     $("#content-2").show(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="my-select"> 
 
    <option disabled selected value> -- select an option -- </option> 
 
    <option value="Student">Student</option> 
 
    <option value="Teacher">Teacher</option> 
 
</select> 
 

 
<p class="content" id="content-1">I am a student.</p> 
 

 
<p class="content" id="content-2">I am a teacher.</p>

Answer 4

Sie können dies immer versuchen:

$('select').change(function(){ 
 
    if($(this).val() == "Teacher") { 
 
    $('input').remove(); 
 
    $("#myDiv").append("<input value='Teacher'/>"); 
 
    } else { 
 
    $('input').remove(); 
 
    $("#myDiv").append("<input value='Student'/>"); 
 
    } 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select> 
 
    <option value="Student">Student</option> 
 
    <option value="Teacher">Teacher</option> 
 
</select> 
 
<div id="myDiv"></div>