Nascondere o rendere visibile un tag in funzione del settaggio di un menu a tendina

**giannino1995** · 15-06-2014, 20:51

Non conosco javascript ma vorrei chiedervi un piccolo aiutino su come nascondere o visualizzare un tag in funzione di come viene settato un menu a tendina del layout. In pratica vorrei che nell'esempio qui sotto ‘Carica il file 1:’ e ‘Carica il file 2:’ a default siano sempre visualizzabili. Vorrei però che quando setto ‘Home’ il div che contiene ‘Carica il file 2:’ scomparisse. Ovviamente sono interessato se fosse una cosa semplice diversamente non mi cimento perché non conosco il linguaggio.

codice HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>

<body>
<div>
  <label for="regione">Opzione:</label>
  <br/>
  <select name="regione" id="regioni">
    <option value="" selected="selected">Selezione un'opzione:</option>
    <option value="Home">Home</option>
    <option value="Gallery" >Gallery</option>
  </select>
  <p></p>
</div>
<div>
  <label for="upload"><i>Carica il file 1:</i></label>
  <input type="file" id="upload" name="upload"/>
</div>
<div>
  <label for="upload"><i>Carica il file 2:</i></label>
  <input type="file" id="upload2" name="upload2"/>
</div>
</body>
</html>

**MAeSI** · 15-06-2014, 23:34

Ciao,

in attesa di soluzioni più valide, puoi provare questo codice jQuery (hai bisogno di caricare la libreria):

codice:

$(document).ready(function () {
    $('#regioni').change(function () {
        if ($(this).val() == 'Home') 
            $('#upload2').parent().hide();
        else 
            $('#upload2').parent().show();
    })
});

**giannino1995** · 17-06-2014, 16:59

Ti ringrazio molto per l'aiuto, lo script funziona però ho un nuovo problema. Intanto ti posto il codice che penserei di usare per mio progetto:

codice:

<script type="text/javascript">
    $(document).ready(function() {
        $('#regioni').change(function() {
            if ($(this).val() == 'a')
            $('.classtesto').show();
            $('.classfile').hide();
            $('.classfoto').hide();
            $('.classlogo').hide();
            $('.classcategoria').hide();
            if ($(this).val() == 'b')
            $('.classtesto').hide();
            $('.classfile').hide();
            $('.classfoto').show();
            $('.classlogo').show();
            $('.classcategoria').show();
            if ($(this).val() == 'c')
            $('.classtesto').show();
            $('.classfile').show();
            $('.classfoto').show();
            $('.classlogo').hide();
            $('.classcategoria').hide();
            if ($(this).val() == 'd')
            $('.classtesto').show();
            $('.classfile').hide();
            $('.classfoto').show();
            $('.classlogo').hide();
            $('.classcategoria').show();
            if ($(this).val() == 'e')
            $('.classtesto').show();
            $('.classfile').hide();
            $('.classfoto').hide();
            $('.classlogo').show();
            $('.classcategoria').show();
        })
    });
</script>

Il problema è che quando scelgo b ma in precedenza ho già scelto a o altri casi di questo tipo lo script smette di funzionare ovvero accade che io non possa più cambiare alcunché della configurazione presente e per effettuare una nuova scelta io debba fare un reflesh della pagina con il browser.

**giannino1995** · 17-06-2014, 17:11

Scusa, sono io che sono impreciso, ho dimenticato le parentesi. Ho però un nuovo problema: come faccio a dire a jquery che deve ricaricare la pagina o mostrare tutto se ritorno a "Selezione un'opzione"; guarda il primo codice di visualizzazione in html per capire.

**giannino1995** · 17-06-2014, 19:57

Altra cosa che non riesco a fare e di avviare la funzione ogni volta che accedo alla pagina. Se accedo alla pagina con il menu impostato in un certo modo devo riuscire a visualizzare un certo tipo di informazioni...

**giannino1995** · 17-06-2014, 23:37

avevo sbagliato a posizionare il codice, ora funziona tutto, grazie mille!

grazie mille!

Discussione: Nascondere o rendere visibile un tag in funzione del settaggio di un menu a tendina

Strumenti discussione

Ricerca discussione

Visualizza

Nascondere o rendere visibile un tag in funzione del settaggio di un menu a tendina

Permessi di invio