Verwenden von Dropdown-Listen zum Steuern von Formularen

Ich möchte Dropdown-Listen verwenden, um das Format eines Menüs zu steuern, das ich erstellen möchte. Ich habe jetzt mehrere Stunden im Internet gesucht, ohne Erfolg. Wir möchten ein Formular erstellen, dessen Format über ein Dropdown-Menü gesteuert werden kann. Ich habe unten ein sehr einfaches Webformular erstellt, das HTML-Code unten verwendet, um zu demonstrieren;Verwenden von Dropdown-Listen zum Steuern von Formularen

Wir möchten das Formular dem Benutzer anzeigen, abhängig von der Auswahl des Dropdown-Menüs "Anzahl der Bewerber". Wenn der Benutzer 1 auswählt, wird nur die Dropdown-Liste "Antragsteller 1 Titel" angezeigt. Wenn der Benutzer 2 auswählt, werden dem Benutzer die beiden Dropdown-Felder "Bewerber 1 Titel" und "Bewerber 2 Titel" angezeigt.

Ist das etwas, auf das jemand hier gestoßen ist?

<html> 
 
    <body> 
 
    <form/> 
 
    
 
    <label for="txt_appnos">Number of Applicants:</label>   
 
    <select id="txt_appnos" name="appnos"> 
 
     <option value="appnos1">1</option> 
 
     <option value="appnos2">2</option> 
 
    </select> 
 
    <br>  
 
    <br>  
 
    
 
    \t 
 
    <label for="txt_title1">Applicant 1 Title:</label>   
 
    <select id="txt_title1" name="title1"> 
 
     <option value="MR1">MR</option> 
 
     <option value="MRS1">MRS</option> 
 
     <option value="MISS1">MISS</option> 
 
     <option value="MS1">MS</option> 
 
    </select>  
 
    
 
    <br>  
 
    <br>  
 
    
 
    <label for="txt_title2">Applicant 2 Title:</label>   
 
    <select id="txt_title2" name="title2"> 
 
     <option value="MR2">MR</option> 
 
     <option value="MRS2">MRS</option> 
 
     <option value="MISS2">MISS</option> 
 
     <option value="MS2">MS</option> 
 
    </select> 
 
    
 
    </form> 
 
    </body> 
 
    </html>

Quelle

2016-07-28 Martin Jackson

den Code unten versuchen.

$('#appnos').on('change', function() { 
 
    var val = $(this).val(); 
 
    $('#form1').hide(); 
 
    $('#form2').hide(); 
 
    $('#' + val).show(); 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<label for="txt_appnos">Number of Applicants:</label>   
 
<select id="appnos" name="appnos"> 
 
    <option value="form1">1</option> 
 
    <option value="form2">2</option> 
 
</select> 
 
<br>  
 
<br>  
 

 

 
<form id="form1" class="hidden"> 
 
<label for="txt_title1">Applicant 1 Title:</label>   
 
<select id="txt_title1" name="title1"> 
 
    <option value="MR1">MR</option> 
 
    <option value="MRS1">MRS</option> 
 
    <option value="MISS1">MISS</option> 
 
    <option value="MS1">MS</option> 
 
</select> 
 
</form>  
 

 
<form id="form2" class="hidden"> 
 
<label for="txt_title2">Applicant 2 Title:</label>   
 
<select id="txt_title2" name="title2"> 
 
    <option value="MR2">MR</option> 
 
    <option value="MRS2">MRS</option> 
 
    <option value="MISS2">MISS</option> 
 
    <option value="MS2">MS</option> 
 
</select> 
 
</form>

Quelle

2016-07-28 11:49:51

Dank für Ihre Antwort Gauthaman jedoch, dass nicht für mich arbeiten. Es sieht so aus, als ob du dort Java Script verwendest. Gibt es jedoch eine Möglichkeit, dies zu tun, indem Sie nur HTML-Code verwenden? –

im Grunde müssen wir das Ereignis Ihrer Drop-Down bekommen; mit nur HTML bezweifle ich, ob das möglich ist (ich habe sehr begrenzte Kenntnisse mit HTML). Vielleicht können einige andere Profis helfen. Viel Glück. –

Verwenden von Dropdown-Listen zum Steuern von Formularen

Antwort

Verwandte Themen