getElementById() non funziona su chrome

[Simo990]

Salve a tutti,

ho creato una pagina con un form in cui c'è un tag select che permette di scegliere il numero di campi da visualizzare, e questi appaiono di conseguenza all'evento onClick.

il codice è il seguente:

		<select name="oggetti">
		<option value="1"          onclick="document.getElementById('v1').style.display='block';
																 document.getElementById('v2').style.display='none';
																 document.getElementById('v3').style.display='none';">1
		</option>
		<option value="2"          onclick="document.getElementById('v1').style.display='block';
																 document.getElementById('v2').style.display='block';
																 document.getElementById('v3').style.display='none';">2
		</option>		
		<option value="3"          onclick="document.getElementById('v1').style.display='block';
																 document.getElementById('v2').style.display='block';
																 document.getElementById('v3').style.display='block';">3
		</option>
	</select>

		<tr id="v1" style='display:block'>
			<td style="width: 840px;">Primo oggetto:</td>
			<td><input type='text' size='2' maxlength='5' name='ogg1'></td>
		</tr>
		<tr id="v2" style='display:none'>
			<td style="width: 840px;">Secondo oggetto:</td>
			<td><input type='text' size='2' maxlength='5' name='ogg2'></td>
		</tr>
		<tr id="v3" style='display:none'>
			<td style="width: 840px;">Terzo oggetto:</td>
			<td><input type='text' size='2' maxlength='5' name='ogg3'></td>
		</tr>

funziona perfettamente su firefox e opera, mentre su IE, safari e google chrome no.
Sapreste dirmi perché?

[cavicchiandrea]

devi usare onchange sulla select (cerca sul forum), non onclick sulle options

[Simo990]

Grazie per la risposta Andrea, conosco l'attributo onchange della select, ma in questo caso ho usato onclick per semplicità, anche perché non saprei come realizzare su onchange quello che ho fatto su onclick... hai qualche suggerimento da darmi?

[Simo990]

Ho pensato di fare una cosa di questo tipo:

<script>
<!--
function changeStyle1() {
getElementsByTagName('option')[0].style.display='block';
getElementsByTagName('option')[1].style.display='none';
getElementsByTagName('option')[2].style.display='none';
}

function changeStyle2() {
getElementsByTagName('option')[0].style.display='block';
getElementsByTagName('option')[1].style.display='block';
getElementsByTagName('option')[2].style.display='none';
}

function changeStyle3() {
getElementsByTagName('option')[0].style.display='block';
getElementsByTagName('option')[1].style.display='block';
getElementsByTagName('option')[2].style.display='block';
}

//e così via

-->
</script>

<select onchange="if (getElementsByTagName('option')[0].selected) changeStyle1(); if (getElementsByTagName('option')[1].selected) changeStyle2(); if (getElementsByTagName('option')[2].selected) changeStyle3();">

<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

</select>

ovviamente usando uno o più cicli per sistemare il tutto con meno codice possibile... ma per esempio, è possibile inserire un for all'interno di onchange? Per favore aiutatemi, sono ancora alle prime armi con javascript!

[Simo990]

Niente ho risolto ho creato 3 funzioni che cambiano style.display all'evento onchange