Utility
Home Messaggi odierni FAQ Ricerca avanzata Lo staff del forum Regolamento Utenti Archivio
Visualizzazione dei risultati da 1 a 3 su 3

Discussione: select attiva div

  1. 22-12-2011, 09:18 #1
    peppeweb
    peppeweb non è in linea
    Utente di HTML.it L'avatar di peppeweb
    Registrato dal
    Sep 2000
    Messaggi
    548

    select attiva div

    Salve a tutti

    sto cercando di adattare uno script trovato sul forum per far visualizzare un div quando si seleziona un valore da una select.

    Lo script con una sola select funziona, ma quando vado per aggiungere una select in piu si comporta in modo anomalo, in pratica dopo aver selezionato dalla prima select un valore e quindi mi visualizza il div di riferimento appena seleziono un valore dalla seconda select mi chiude il div della prima select per visualizzarmi quello relativo alla seconda seletc:

    Codice PHP:
    <html>
    <    head>

    <    script> 
    function     FunzBambini(Valore){ 

        var     ref = document.getElementById('n1'); 
        if (    Valore=='nA'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        } 

        var     ref = document.getElementById('n2'); 
        if (    Valore=='nB'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        } 

        var     ref = document.getElementById('n3'); 
        if (    Valore=='nC'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        }
        
        var     ref = document.getElementById('t1'); 
        if (    Valore=='tA'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        } 

        var     ref = document.getElementById('t2'); 
        if (    Valore=='tB'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        } 

        var     ref = document.getElementById('t3'); 
        if (    Valore=='tC'){ 
            ref.style.display='block'; 
        } 
        else{ 
            ref.style.display='none'; 
        } 
    } 
    </script> 

    </head>
    <body>
    <body>


    <form id="form1"> 
    <select id="Combo1" onchange="FunzBambini(form1.Combo1.value);">
    <option value=""> </option>
    <option value="nA">Voce A</option>
    <option value="nB">Voce B</option>
    <option value="nC">Voce C</option>
    </select>

    <div style="display:none;" id="n1">testo testo testo 1</div>
    <div style="display:none;" id="n2">testo testo testo 2</div>
    <div style="display:none;" id="n3">testo testo testo 3</div>




    <select id="Combo2" onchange="FunzBambini(form1.Combo2.value);">
    <option value=""> </option>
    <option value="tA">Voce A</option>
    <option value="tB">Voce B</option>
    <option value="tC">Voce C</option>
    </select>

    <div style="display:none;" id="t1">testo testo testo 1</div>
    <div style="display:none;" id="t2">testo testo testo 2</div>
    <div style="display:none;" id="t3">testo testo testo 3</div>

    </form> 

    </body>
    </html> 
    c'è un modo per risolvere questo problema ?
    Pippo Giacalone
    giacalone@tin.it
    Rispondi quotando Rispondi quotando
  2. 22-12-2011, 11:28 #2
    lucavizzi
    lucavizzi non è in linea
    Moderatore di Javascript L'avatar di lucavizzi
    Registrato dal
    Mar 2007
    Messaggi
    3,116

    Re: select attiva div

    Codice PHP:
    <html>
    <    head>

    <    script> 
    function     FunzBambini(Valore,select){ 
            if(    select==1){
                        document.getElementById('nA').style.display='none';
                        document.getElementById('nB').style.display='none';
                        document.getElementById('nC').style.display='none';
            }

            if(    select==2){
                        document.getElementById('tA').style.display='none';
                        document.getElementById('tB').style.display='none';
                        document.getElementById('tC').style.display='none';
            }

                document.getElementById(Valore).style.display='block';
    } 
    </script> 

    </head>
    <body>
    <body>


    <form id="form1"> 
    <select id="Combo1" onchange="FunzBambini(this.value,1);">
    <option value=""> </option>
    <option value="nA">Voce A</option>
    <option value="nB">Voce B</option>
    <option value="nC">Voce C</option>
    </select>

    <div style="display:none;" id="nA">testo testo testo 1</div>
    <div style="display:none;" id="nB">testo testo testo 2</div>
    <div style="display:none;" id="nC">testo testo testo 3</div>




    <select id="Combo2" onchange="FunzBambini(this.value,2);">
    <option value=""> </option>
    <option value="tA">Voce A</option>
    <option value="tB">Voce B</option>
    <option value="tC">Voce C</option>
    </select>

    <div style="display:none;" id="tA">testo testo testo 1</div>
    <div style="display:none;" id="tB">testo testo testo 2</div>
    <div style="display:none;" id="tC">testo testo testo 3</div>

    </form> 

    </body>
    </html> 
    Nota che ho modificato gli id dei div ed il richiamo alla funzione.
    Rispondi quotando Rispondi quotando
  3. 22-12-2011, 12:35 #3
    peppeweb
    peppeweb non è in linea
    Utente di HTML.it L'avatar di peppeweb
    Registrato dal
    Sep 2000
    Messaggi
    548
    Grazie mille !!
    Pippo Giacalone
    giacalone@tin.it
    Rispondi quotando Rispondi quotando
« Discussione precedente | Prossima discussione »

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  

Regole del Forum

Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.