Come generare una quantita di campi Input basata sul valore di una select

[icarrara]

Io non sono un'esperto di HTML/Javascript cosi' spero che qualcuno mi possa autare.

In un form devo acquisire le eta' di una lista di persone.
Io non conosco in anticipo la quantita' di queste persone.

Quindi devo generare dinamicamente una quantita' di campi Input con i quali raccogliere le eta' delle persone basandomi sul valore ottenuto da una select di una drop down list.

La quantita' delle persone sara cioe' determinata dal valore selezionato dalla drop down list.

Per esempio, se l'utente seleziona il valore "3" dalla drop down list, nel form io devo generare dinamicamente 3 input fields per acquisire le eta' delle 3 persone.
Se l'utente seleziona il valore "0" dalla drop down list, nel form non devo generare alcun input fields.
L'unica cosa che ho capito e' che devo usare "onChange" nella drop down list.

Vorrei usare solo HTML e Javascript perche' non voglio entrare in conflitto con jQuery o altre librerie presenti nella pagna che devo modificare.
Spero che usando solo HTML/Javascript sia possbile ottenere il risultato voluto.

Allo stesso tempo devo ottenere il risultato senza ricaricare la pagina.

Ho fatto qualche prova per imparare a mostrare/nascondere un campo Input - di seguito il mio codice:

<select name="opt" label="some opts" id="opts" onchange="showdv(this,'one','two');" >
    <option value="one" selected="true">Option one</option>
    <option value="two" >Option two</option>
</select>

<div id="codFiscaleField" style="display:none;">
   <input name="codFiscale" size="50"></input>
</div>

<script>
        function showdv(obj,id1,id2) {
            txt=obj.options[obj.selectedIndex].text;
            document.getElementById("codFiscaleField").style.display='none';
             
            if (txt.match(id1)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
             
            if (txt.match(id2)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
        }
</script>

Se s celgo "Option two" lo script mostra il campo di input correttamente.

Ma il mio obiettivo e' diverso: Quando l'utente seleziona "Option two" (o "Option three" o "Option four" e cosi via) devo mostrare due campi di Inout (o tre o quattro campi di Input).

L'opzione selezionata determina il numero di campi Input , per esempio:

L'Utente seleziona "Option three", io devo mostrare tre campi Input.
L'Utente seleziona "Option four", io devo mostrare quattro campi Input.

La select della drop down list determina il numero delle Persone e io devo raccogliere le eta' delle Persone.

Grazie per qualsiasi forma di aiuto !
Ivano C.

[ciro78]

Ciao ,
forse mi sono perso nella lettura ma non parli prima di età e poi di codice fiscale.

A mio avviso sbagli approccio. Ti indico a grandi linee come farei

- usando jquery verificherei l'evento change della select
- la select piuttosto che avere come valori "one","two", etc dovrebbe avere 1,2,3 (in questo modo puoi effettuare un ciclo.
- pulisci i precedenti campi(nel senso che rimuovi tutti i campi esistenti o aggiungi )
- recuperato il valore della select fai un ciclo for da 1 al valore della select e per ogni ciclo aggiungi un campo (append di jquery)

[icarrara]

Grazie Ciro per il commento.

Codice fscale era un esempio, devo raccogliere le eta' di un numero di persone definito dalla select della drop down list.

Non posso usare jQuery ma solo Javascript puro.

Grazie !

Ivano C.

[ciro78]

Grazie Ciro per il commento.

Codice fscale era un esempio, devo raccogliere le eta' di un numero di persone definito dalla select della drop down list.

Non posso usare jQuery ma solo Javascript puro.

Grazie !

Ivano C.

ciao,
l'algoritmo resta uguale. devi usare le api native js piuttosto che jquery