Show/hide div

**dover** · 03-03-2008, 00:01

Ciao a tutti: Ho questo codice, che mostra un div se il valore della select non è vuoto. Ma come faccio a far scomparire il div se riporto la select al valore vuoto (ossia = seleziona)?
Grazie!

<html>
<head>
<script type="text/javascript">
function visualizza(obj, a){
var e=document.getElementById(a);
if(!e)return true;
e.style.display="block"
return true;
}

function nascondi(obj, a){
var e=document.getElementById(a);
if(!e)return true;
e.style.display="none"
return true;
}

</script>
<title></title>
</head>
<body>
<form name="Form">
<table border=0 cellspacing="3" cellpadding="2">
<tr>
<td>Effettua una scelta[/b]</td>
<td>
<select name="seleziona" onchange="return visualizza(this, 'nascosto')">
<option value="" onselect,onFocus=" nascondi(this, 'nascosto')" selected>Seleziona</option>
<option value="scelta1" onselect="return visualizza(this, 'nascosto')">scelta1</option>
<option value="scelta2" onselect="return visualizza(this, 'nascosto')">scelta2</option>
<option value="scelta3" onselect="return visualizza(this, 'nascosto')">scelta3</option>
<option value="scelta4" onselect="return visualizza(this, 'nascosto')">scelta4</option>
</select></td>
</tr> </table>
<div id="nascosto" style="display: none; margin-left: 20px;">
<table><tr>
<td>Se la select ha un valore, visualizzo il div</div></td>
<td>
<input type="text" name="" size="33"></td>
</tr>
</table></div>
</form>
</body>
</html>

**Xinod** · 03-03-2008, 01:36

rimuovi tutti questi onselect onfocus

codice:

<option value="" onselect,onFocus=" nascondi(this, 'nascosto')" selected>Seleziona</option>
<option value="scelta1" onselect="return visualizza(this, 'nascosto')">scelta1</option>
<option value="scelta2" onselect="return visualizza(this, 'nascosto')">scelta2</option>
<option value="scelta3" onselect="return visualizza(this, 'nascosto')">scelta3</option>
<option value="scelta4" onselect="return visualizza(this, 'nascosto')">scelta4</option>
</select>

lascia solo questo onchange (anche il return non serve)
<select name="seleziona" onchange="visualizza(this, 'nascosto')">
dove la funzione e'

codice:

function visualizza(obj, a){
var el=document.getElementById(a);
if(!el) return;
el.style.display=(obj.selectedIndex!=0)?"block":"none";
}

quest ultima riga valuta il selectedIndex, se e' 0 la prima option e' selezionata e setta il display a none, altrimenti a block

per lavorare con il value, come chiedevi inizialmente, cambiala in
el.style.display=(obj.options[obj.selectedIndex].value!="")?"block":"none";

ciao

**dover** · 03-03-2008, 02:59

Perfetto! Ho risolto grazie alla tua spiegazione.. Thanks!

P.S: Riposto il codice funzionante a beneficio di chi farà una ricerca...

<html>
<head>
<script type="text/javascript">

function visualizza(obj, a){
var el=document.getElementById(a);
if(!el) return;
el.style.display=(obj.selectedIndex!=0)?"block":"n one";
}

</script>
<title></title>
</head>
<body>
<form name="Form">
<table border=0 cellspacing="3" cellpadding="2">
<tr>
<td>Effettua una scelta[/b]</td>
<td>
<select name="seleziona" onchange="return visualizza(this, 'nascosto')">
<option value="" selected>Seleziona</option>
<option value="scelta1">scelta1</option>
<option value="scelta2">scelta2</option>
<option value="scelta3">scelta3</option>
<option value="scelta4">scelta4</option>
</select></td>
</tr> </table>
<div id="nascosto" style="display: none; margin-left: 20px;">
<table><tr>
<td>Se la select ha un valore, visualizzo il div</div></td>
<td>
<input type="text" name="" size="33"></td>
</tr>
</table></div>
</form>
</body>
</html>

Discussione: Show/hide div

Strumenti discussione

Ricerca discussione

Visualizza

Show/hide div

Permessi di invio