javascript combo hidden / visible

**graphia** · 15-06-2004, 16:51

ho cercato aiuto nelle precedenti discussioni ma mi pare di non aver visto niente. In pratica ho questo script:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<form name="form1">
<table border="0" cellspacing="2" cellpadding="0" width="80%"><tr><td>
<select name="bambini" onChange="DropDown();">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td><td>
<div id="hiddenOpt_1" style="visibility:hidden;">
<select name="eta_bambini_1">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div id="hiddenOpt_2" style="visibility:hidden;">
<select name="eta_bambini_2">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div id="hiddenOpt_3" style="visibility:hidden;">
<select name="eta_bambini_3">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>

<script>
function DropDown(){
if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="1"){
hiddenOpt_1.style.visibility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="2"){
hiddenOpt_1.style.visibility = "visible";
hiddenOpt_2.style.visibility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="3"){
hiddenOpt_1.style.visibility = "visible";
hiddenOpt_2.style.visibility = "visible";
hiddenOpt_3.style.visibility = "visible";
} else {
hiddenOpt.style.visibility = "hidden";
}
}
</script>
</td></tr></table>
</BODY>
</HTML>

che funziona benissimo con explorer. E' un combo con 3 opzioni, se scelgo la prima opzione, si visualizza un secondo combo, se scelgo la seconda si visualizzano altri 2 combo e con la terza, 3 combo.

Qualcuno è in grado di farlo funzionare anche con Netscape?

Ringrazio in anticipo per l'aiuto

**Mich_** · 15-06-2004, 16:58

docuemnt.getElementById('hiddenOpt_1').style.visib ility = "visible";

similmente per gli altri

**graphia** · 15-06-2004, 17:31

grazie per la super-sollecita risposta Mich_

ma... (so di essere moooolto ignorante) così non funza più neanche in explorer = errore riga 45, proprietà o metodo non supportati dall'oggetto.

Dove sbaglio?

Ecco il code con il tuo suggerimento (...così come l'ho inteso io):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<form name="form1">
<table border="0" cellspacing="2" cellpadding="0" width="80%"><tr><td>
<select name="bambini" onChange="DropDown();">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td><td>
<div id="hiddenOpt_1" style="visibility:hidden;">
<select name="eta_bambini_1">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div id="hiddenOpt_2" style="visibility:hidden;">
<select name="eta_bambini_2">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div id="hiddenOpt_3" style="visibility:hidden;">
<select name="eta_bambini_3">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>

<script>
function DropDown(){
if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="1"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="2"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
document.getElementByld('hiddenOpt_2').style.visib ility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="3"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
document.getElementByld('hiddenOpt_2').style.visib ility = "visible";
document.getElementByld('hiddenOpt_3').style.visib ility = "visible";
} else {
document.getElementByld('hiddenOpt').style.visibil ity = "hidden";
}
}
</script>
</td></tr></table>
</BODY>
</HTML>

**Mich_** · 15-06-2004, 17:45

Ho visto che hai corretto il mio docuemnt (ho visto ora l'errore).

Ma non esiste l'elemento 'hiddenOpt', che richiami in fondo allo script.
Non riesco a capire cosa serva la condizione else finale.

Nota: non so quale sia la riga 45, magari la prossima volta cercala tu e segnalala.

Lo vedo ora:
Attenzione alla sintassi:
document.getElementById()
get
Element
By
Id (id, con la i maiuscola)

**graphia** · 15-06-2004, 18:08

hai ragione su tutti i fronti

mannaggia all'ignoranza

1)
cambiato id con Id

2)
cambiato else finale

ma il risultato non cambia, ho sempre quel malefico errore sulla riga:

document.getElementByld('hiddenOpt_1').style.visib ility = "visible";

scusa se approfitto ma riposto nuovamente il code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>

<BODY>
<form name="form1">
<table border="0" cellspacing="2" cellpadding="0" width="80%"><tr><td>
<select name="bambini" onChange="DropDown();">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td><td>
<div Id="hiddenOpt_1" style="visibility:hidden;">
<select name="eta_bambini_1">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div Id="hiddenOpt_2" style="visibility:hidden;">
<select name="eta_bambini_2">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
</td><td>
<div Id="hiddenOpt_3" style="visibility:hidden;">
<select name="eta_bambini_3">
<option value="0-2">0-2</option>
<option value="2-6">2-6</option>
<option value="6-12">6-12</option>
</select>
</div>
<script>
function DropDown(){
if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="1"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="2"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
document.getElementByld('hiddenOpt_2').style.visib ility = "visible";
} else if(document.form1.bambini.options[document.form1.bambini.selectedIndex].value=="3"){
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";
document.getElementByld('hiddenOpt_2').style.visib ility = "visible";
document.getElementByld('hiddenOpt_3').style.visib ility = "visible";
} else {
document.getElementByld('hiddenOpt_1').style.visib ility = "hidden";
document.getElementByld('hiddenOpt_2').style.visib ility = "hidden";
document.getElementByld('hiddenOpt_3').style.visib ility = "hidden";
}
}
</script>
</td></tr></table>
</BODY>
</HTML>

**Mich_** · 16-06-2004, 08:22

ma perche` io leggo sempre
document.getElementByld('hiddenOpt_1').style.visib ility = "visible";

dove al posto di I maiuscolo leggo L minuscolo?

**graphia** · 16-06-2004, 10:40

brutta cosa avere la prova "provata" di essere rinco.....

Comunque (nonostante la triste dimostrazione che mi hai dato) grazie mille. Adesso funziona alla perfezione.

P.S. la prossima volta giuro che userò il Times come font.... (anzichè l'Arial)

**Mich_** · 16-06-2004, 11:00

Nelle finestre di editing delle pagine Web, io consiglierei di usare il Courier come font: ha i caratteri con larghezza fissa e nella programmazione e` un grosso aiuto.

Inoltre non e` il caso di usare editor troppo evoluti (dal punto di vista grafico): editor tipo WorPad o emacs sono i migliori.

**graphia** · 16-06-2004, 11:11

grazie per il consiglio. Userò il Courier.

Per quanto riguarda l'editor html io uso Editplus (mi trovo bene anche per via di PHP)- cosa ne dici?

Il fatto che poi, come avrai sicuramente notato, io abbia qualche problema di "comprendonio"

con il Javascript....

Ciao

**Mich_** · 16-06-2004, 11:33

Non conosco Editplus.

Pero` se usi un carattere fisso, puoi apprezzare la formattazione e la strutturazione dei programmi, che con un carattere proporzionale viene persa (almeno in parte).
Questo vale per tutti i linguaggi, compreso HTML.

Discussione: javascript combo hidden / visible

Strumenti discussione

Ricerca discussione

Visualizza

javascript combo hidden / visible

Permessi di invio