Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 15
  1. #1
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585

    Passare valore di dropdown menu in input type text

    Ciao a Tutti,

    ho adattato il codice preso da un sito internet per creare un menu' a tendina con piu' livelli.


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>JavaScript + CSS Dropdown Menu</title>
    <style type="text/css">
    body {margin:25px; font:12px Arial;}
    ul.menu {list-style:none; margin:0; padding:0}
    ul.menu * {margin:0; padding:0}
    ul.menu a {display:block; color:#000; text-decoration:none}
    ul.menu li {position:relative; float:left; margin-right:2px}
    ul.menu ul {position:absolute; top:26px; left:0; background:#ffffff; display:none; opacity:0; list-style:none}
    ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:160px; margin:0}
    ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#dldldl}
    ul.menu ul li a:hover {background-color:#c2dfff}
    ul.menu ul li li {position:relative; border:1px solid #aaa; border-top:none; width:100px; margin:0}
    ul.menu ul li li li {position:relative; border:1px solid #aaa; border-top:none; width:100px; margin:0}
    ul.menu ul ul {left:160px; top:0px}
    ul.menu ul ul ul {left:100px; top:0px}
    ul.menu .menulink {border:1px solid #aaa; padding:5px 7px 7px; font-weight:bold; width:146px}
    ul.menu .sub {background:#ffffff url(../images/arrow.gif) 60px 8px no-repeat}
    ul.menu ul ul .sub2 {background:#ffffff url(../images/arrow.gif) 80px 8px no-repeat}
    ul.menu .topline {border-top:1px solid #aaa}
    ul#tps {left:160px; top:-1px}
    ul#tps ul {left:100px; top:0px}
    </style>
    <script type="text/javascript">
    //
    var menu=function(){
    var t=15,z=50,s=6,a;
    function dd(n){this.n=n; this.h=[]; this.c=[]}
    dd.prototype.init=function(p,c){
    a=c; var w=document.getElementById(p), s=w.getElementsByTagName('ul'), l=s.length, i=0;
    for(i;i<l;i++){
    var h=s[i].parentNode; this.h[i]=h; this.c[i]=s[i];
    h.onmouseover=new Function(this.n+'.st('+i+',true)');
    h.onmouseout=new Function(this.n+'.st('+i+')');
    }
    }
    dd.prototype.st=function(x,f){
    var c=this.c[x], h=this.h[x], p=h.getElementsByTagName('a')[0];
    clearInterval(c.t); c.style.overflow='hidden';
    if(f){
    p.className+=' '+a;
    if(!c.mh){c.style.display='block'; c.style.height=''; c.mh=c.offsetHeight; c.style.height=0}
    if(c.mh==c.offsetHeight){c.style.overflow='visible '}
    else{c.style.zIndex=z; z++; c.t=setInterval(function(){sl(c,1)},t)}
    }else{p.className=p.className.replace(a,''); c.t=setInterval(function(){sl(c,-1)},t)}
    }
    function sl(c,f){
    var h=c.offsetHeight;
    if((h<=0&&f!=1)||(h>=c.mh&&f==1)){
    if(f==1){c.style.filter=''; c.style.opacity=1; c.style.overflow='visible'}
    clearInterval(c.t); return
    }
    var d=(f==1)?Math.ceil((c.mh-h)/s):Math.ceil(h/s), o=h/c.mh;
    c.style.opacity=o; c.style.filter='alpha(opacity='+(o*100)+')';
    c.style.height=h+(d*f)+'px'
    }
    return{dd:dd}
    }();
    //
    </script>
    </head>
    <body>

    <ul class="menu" id="menu">
    <li>
    <li><a href="#" class="menulink">Italia</a>
    <ul>
    <li><a href="#" class="sub topline">Nord</a>
    <ul>
    <li><a href="#" class="sub2 topline">Lombardia</a>
    <ul>
    <li><a href="#" class="topline">Milano</a></li>
    <li><a href="#">Bergamo</a></li>
    <li><a href="#">Pavia</a></li>
    </ul>
    </li>
    <li><a href="#" class="sub2">Piemonte</a>
    <ul>
    <li><a href="#" class="topline">Torino</a></li>
    <li><a href="#">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Centro</a></li>
    <li><a href="#">Sud</a></li>
    </ul>
    </li>
    </ul>


    <script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
    </script>

    <input type="text" name="choice" id="choice" value="..." size="58">

    </body>
    </html>

    In questo caso se uno sceglie: Nord / Lombardia / Milano,

    vorrei che questo valore, selezionato col click, venisse memorizzato per intero in un input type text ....

    Si puo' fare ??


    N.B. mi rendo conto che tale menu' adattato da un codice copiato ininternet contiene tanti collegamenti ipertestuali che a me non servono .... pero' con il mio know-how sono arrivato a questo punto ...

    Grazie mille in anticipo !!!!

  2. #2
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    puoi inserire la seguente riga di codice in ogni comune: onclick="document.getElementById('choice').value=t his.innerHTML"

  3. #3
    I am a trainer excel, 2010. In my free time I ride my bike and listen to music. Feel free to contact

  4. #4
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585
    Grazie Vindav per la risposta:

    Ho provato cosi' facendo e ho ottenuto un risultato parziale, nel senso che se scrivo il suddetto codice:


    <ul class="menu" id="menu">
    <li>
    <li><a href="#" class="menulink">Italia</a>
    <ul>
    <li><a href="#" class="sub topline">Nord</a>
    <ul>
    <li class="sub2 topline"><a href="#">Lombardia</a>
    <ul>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#" class="topline">Milano</a></li>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#">Bergamo</a></li>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#">Pavia</a></li>
    </ul>

    </li>
    <li><a href="#" class="sub2">Piemonte</a>
    <ul>
    <li><a href="#" class="topline">Torino</a></li>
    <li><a href="#">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Centro</a></li>
    <li><a href="#">Sud</a></li>
    </ul>
    </li>
    </ul>


    <script type="text/javascript">
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
    </script>

    <input type="text" name="choice" id="choice" value="..." size="258">


    nella casella di testo compare Bergamo, Milano, Pavia contornati dal codice, ad es.

    <A href="#">Pavia</A>
    che poi posso con un replace togliere....


    se pero' nella casella di testo voglio che venga messo anche Nord Lombardia Pavia,
    ed inserisco il codice seguente:

    <ul>
    <li class="sub2 topline" onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#">Lombardia</a>
    <ul>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#" class="topline">Milano</a></li>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#">Bergamo</a></li>
    <li onclick="document.getElementById('choice').value=t his.innerHTML"><a href="#">Pavia</a></li>

    </ul>
    </li>
    <li><a href="#" class="sub2">Piemonte</a>
    <ul>
    <li><a href="#" class="topline">Torino</a></li>
    <li><a href="#">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>

    ottengo in output una stringa lunghissima con tutte le opzioni della classe che non va bene.


    Ho provato a mettere il codice ad es:

    <li id="Berg" value="Bergamo" onclick="document.getElementById('choice').value=t his.value"><a href="#">Bergamo</a></li>

    ma senza risultato ....
    Ultima modifica di betto; 08-07-2014 a 17:47

  5. #5
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585
    Ho provato a migliorare un po' il codice ma non riesco a venirne fuori ....

    <li class="sub2 topline" onclick="document.getElementById('choice').value=' Lombardia'"><a href="#">Lombardia</a>
    <ul>
    <li onclick="document.getElementById('choice').value=' Milano'"><a href="#" class="topline">Milano</a></li>
    <li onclick="document.getElementById('choice').value=' Bergamo'"><a href="#">Bergamo</a></li>
    <li onclick="document.getElementById('choice').value=' Pavia'"><a href="#">Pavia</a></li>
    </ul>
    </li>
    <li><a href="#" class="sub2" onclick="document.getElementById('choice').value=' Piemonte'">Piemonte</a>
    <ul>
    <li><a href="#" class="topline">Torino</a></li>
    <li><a href="#">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>

    facendo cosi' se clicco su Lombardia o Piemonte, nel campo testo choice mi viene restituito il valore corretto, mentre se clicco su Milano / Pavia / Bergamo mi continua a rimanere memorizzato Lombardia .... come mai ???

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    il codice che ti ho suggerito va inserito nel tag a non nel tag li

  7. #7
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585
    Vindav, Grazie mille !!

    Ho provato cosi' come mi hai detto e devo dire che funziona bene:

    <ul class="menu" id="menu">
    <li>
    <li><a href="#" class="menulink">Italia</a>
    <ul>
    <li><a href="#" class="sub topline" onclick="document.getElementById('choice').value=t his.innerHTML">Nord</a>
    <ul>
    <li class="sub2 topline"><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Lombardia</a>
    <ul>
    <li><a href="#" class="topline" onclick="document.getElementById('choice').value=t his.innerHTML">Milano</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Bergamo</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Pavia</a></li>
    </ul>
    </li>
    <li><a href="#" class="sub2" onclick="document.getElementById('choice').value=t his.innerHTML">Piemonte</a>
    <ul>
    <li><a href="#" class="topline" onclick="document.getElementById('choice').value=t his.innerHTML">Torino</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#">Centro</a></li>
    <li><a href="#">Sud</a></li>
    </ul>
    </li>
    </ul>


    Mi rimane un problema:
    nel modo che mi hai suggerito nella casella di testo "choice" vengo ad avere:

    Nord -> se seleziono Nord
    Lombardia -> se seleziono Nord e Lombardia
    Milano -> se seleziono Nord, Lombardia e Milano

    vorrei invece avere nella casella di testo "choice" tutto il percorso, quindi:

    Nord -> se seleziono Nord
    Nord / Lombardia -> se seleziono Nord e Lombardia
    Nord / Lombardia / Milano -> se seleziono Nord, Lombardia e Milano

    come fare ??

  8. #8
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585
    Ci sono riuscito, ecco il codice:


    <ul class="menu" id="menu">
    <li>
    <li><a href="#" class="menulink">Italia</a>
    <ul>
    <li id="a1"><a href="#" class="sub topline" onclick="document.getElementById('choice').value=t his.innerHTML">Nord</a>
    <ul>
    <li id="b1" class="sub2 topline"><a href="#" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+this.innerHTML">Lombardia</a>
    <ul>
    <li><a href="#" class="topline" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+document.getElementById('b1').childNodes[0].innerHTML+' / '+this.innerHTML">Milano</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+document.getElementById('b1').childNodes[0].innerHTML+' / '+this.innerHTML">Bergamo</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+document.getElementById('b1').childNodes[0].innerHTML+' / '+this.innerHTML">Pavia</a></li>
    </ul>
    </li>
    <li id="b2"><a href="#" class="sub2" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+this.innerHTML">Piemonte</a>
    <ul>
    <li><a href="#" class="topline" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+document.getElementById('b2').childNodes[0].innerHTML+' / '+this.innerHTML">Torino</a></li>
    <li><a href="#" onclick="document.getElementById('choice').value=d ocument.getElementById('a1').childNodes[0].innerHTML+' / '+document.getElementById('b2').childNodes[0].innerHTML+' / '+this.innerHTML">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li id="a2"><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Centro</a></li>
    <li id="a3"><a href="#" onclick="document.getElementById('choice').value=t his.innerHTML">Sud</a></li>
    </ul>
    </li>
    </ul>


    Grazie mille, di cuore Vindav, per i preziosi consigli !!!

    Se il codice postato lo si puo' migliorare, accolgo volentieri suggerimenti

  9. #9
    Utente di HTML.it
    Registrato dal
    Dec 2010
    Messaggi
    3,660
    in teoria potresti crearti qualcosa di più dinamico, andando ad ispezionare il DOM, senza dover dare degli id ad ogni tag li e senza dover modificare la funzione onclick di ogni tag a, ho buttato giù questo vedi se può andarti bene:

    codice:
    function setInputValue(el, bool){
      if(!bool) tempValue = "";
      nodeParent = el.parentNode.parentNode.parentNode.children[0];
      if(el.innerHTML != "Italia"){ 
        tempValue = el.innerHTML +"/"+tempValue;                                       
        setInputValue(nodeParent,true);
      }else{
        document.getElementById("choice").value =tempValue.substring(0,tempValue.length-1);                                         }
      }
    }
    in ogni tag a metti questo: onclick="setInputValue(this)", se funziona puoi anche rimuovere i vari id
    Ultima modifica di Vindav; 09-07-2014 a 13:38

  10. #10
    Utente di HTML.it
    Registrato dal
    Jun 2002
    Messaggi
    585
    Ciao Vindav,

    ho provato come mi hai detto in questo modo:

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

    function setInputValue(el, bool){
    if(!bool) tempValue = "";
    nodeParent = el.parentNode.parentNode.parentNode.children[0];
    if(el.innerHTML != "Italia"){
    tempValue = el.innerHTML+" / "+tempValue;
    setInputValue(nodeParent,true);
    }
    else{ document.getElementById("choice").value=tempValue. substring(0,tempValue.length-1); }
    }

    </script>
    </head>
    <body>

    <ul class="menu" id="menu">
    <li>
    <li><a href="#" class="menulink">Italia</a>
    <ul>
    <li><a href="#" class="sub topline" onclick="setInputValue(this)">Nord</a>
    <ul>
    <li class="sub2 topline"><a href="#" onclick="setInputValue(this)">Lombardia</a>
    <ul>
    <li><a href="#" class="topline" onclick="setInputValue(this)">Milano</a></li>
    <li><a href="#" onclick="setInputValue(this)">Bergamo</a></li>
    <li><a href="#" onclick="setInputValue(this)">Pavia</a></li>
    </ul>
    </li>
    <li><a href="#" class="sub2" onclick="setInputValue(this)">Piemonte</a>
    <ul>
    <li><a href="#" class="topline" onclick="setInputValue(this)">Torino</a></li>
    <li><a href="#" onclick="setInputValue(this)">Alessandria</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href="#" onclick="setInputValue(this)">Centro</a></li>
    <li><a href="#" onclick="setInputValue(this)">Sud</a></li>
    </ul>
    </li>
    </ul>

    Funziona benissimo, Grazie mille !!!!


    L' unica cosa che devo capire un po' meglio e' il funzionamento della funzione: molto bella, efficace ma per me ancora un po' oscura ....

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.