Select JQuery

**danielebarisano** · 11-05-2015, 18:11

Salve ragazzi, guardate questo codice:

Bambini <select id='bambini'>
<option value ="0"> 0 </option>
<option value ="1"> 1 </option>
<option value ="2"> 2 </option>
<option value ="3"> 3 </option>
<option value ="4"> 4 </option>
<option value ="5"> 5 </option>
<option value ="6"> 6 </option>
<option value ="7"> 7 </option>
</select><br><br>

<select id='etabambini' style="display:none ;">
<option value ="0"> 0 </option>
<option value ="1"> 1 </option>
<option value ="2"> 2 </option>
<option value ="3"> 3 </option>
<option value ="4"> 4 </option>
<option value ="5"> 5 </option>
<option value ="6"> 6 </option>
<option value ="7"> 7 </option>
<option value ="8"> 8 </option>
<option value ="9"> 9 </option>
</select>


<script>
var i,str;
//si genera evento change su select bambini
$ ("#bambini").change(function(){
//ciclo che stampa select in base a numero bambini
var valore =$("#bambini").val();
//document.write("valore: " + valore);
for (i=0; i < valore; i++){
$("#etabambini").css({ "display" : "block"});
}
});
</script>

Sto impazzendo. Vi spiego dov'è il problema. Quello che devo fare io è far visualizzare un numero di select (età
dei bambini ) in base al numero dei bambini. Ho utilizzato la proprietà display:block del CSS.
Il problema è che se alla prima select seleziono un numero di bambini > 1 mi viene restituito una sola select per determinare l età. ESEMPIO: se seleziono 3 bambini alla prima select mi deve restituire 3 select per determinare l'età e non una.
Chi mi può aiutare?

Daniele