Füllen Sie Formulare basierend auf Pick-in Dropdown-Liste

Question

Ich habe ein einfaches Formular mit einer Dropdown-Liste, ich möchte zwei andere Eingabeformulare basierend auf der Auswahl in der Dropdown-Liste vorzufüllen.

Mein Code:

<select> 
    <option person="ben">Ben</option> 
    <option person="henry">Henry</option> 
    <option person="julia">Julia</option> 
    <option person="joe">Joe</option> 
</select> 

<br/> 
<br/> 
<b>Age</b> 
<br/> 
<input type="text" age="age"> 
<br/> 
<b>Gender</b> 
<br/> 
<input type="text" gender="gender"> 

Nehmen wir an, dass ich Julia in der Dropdown-Liste auswählen, dann würde Ich mag Alter und Geschlecht automatisch gefüllt werden, kann aber nach vom Benutzer jederzeit geändert werden die automatische Füllung. Ich bin neu bei all dem, aber ich denke, JavaScript ist der Weg zu gehen (jQuery oder so).

Ich würde mich sehr freuen, wenn Sie mir ein Beispiel dazu zeigen könnten.

Answer 1

können Sie JQuery verwenden:

const peopleData = { 
 
    'Ben' : { age: 42, gender: 'Male' }, 
 
    'Henry': { age: 21, gender: 'Male' }, 
 
    'Julia': { age: 35, gender: 'Female' }, 
 
    'Joe' : { age: 19, gender: 'Male' } 
 
} 
 

 
$(document).ready(function(){ 
 
    $("#person").change(function() { 
 
    var person = $(this).val(); 
 
    $('#age').val(peopleData[person].age) 
 
    $('#gender').val(peopleData[person].gender) 
 
    }); 
 
});

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

 
<select id="person"> 
 
    <option person="ben">Ben</option> 
 
    <option person="henry">Henry</option> 
 
    <option person="julia">Julia</option> 
 
    <option person="joe">Joe</option> 
 
</select> 
 
<hr/> 
 
<div>Age</div> 
 
<input type="text" id="age"> 
 
<div>Gender</div> 
 
<input type="text" id="gender">

Dieser verwendet ein JSON-Objekt mit Daten über jede Person.

Wenn eine Person im Menü ausgewählt ist, werden die Werte der Eingabefelder basierend auf den entsprechenden Daten der Person festgelegt.

Demo

Answer 2

const ageInput = document.querySelector("[age]") 
 
const genderInput = document.querySelector("[gender]") 
 

 
document.querySelector("select").addEventListener("change", (e) => { 
 
    if (e.target.value === "Julia") { 
 
    ageInput.value = 21 
 
    genderInput.value = "female" 
 
    } 
 
})

<select> 
 
    <option person="ben">Ben</option> 
 
    <option person="henry">Henry</option> 
 
    <option person="julia">Julia</option> 
 
    <option person="joe">Joe</option> 
 
</select> 
 

 
<br/> 
 
<br/> 
 
<b>Age</b> 
 
<br/> 
 
<input type="text" age="age"> 
 
<br/> 
 
<b>Gender</b> 
 
<br/> 
 
<input type="text" gender="gender">