[Pillola] Una SELECT avanzata

[NoR]

Per il mio lavoro mi sono trovato nell'esigenza di mettere dei tooltips sulle OPTION di una SELECT. In generale questa operazione non si può fare, perché le option non sono come A e quindi non gestiscono gli eventi di passaggio del mouse (almeno su Internet Explorer...).
Inoltre, se si da una dimensione alla SELECT, anche la tendina delle OPTION avrà quella dimensione e quindi se la descrizione supera tale lunghezza, sarà impossibile vedere la scelta(su FireFox questo problema non c'è).

Soluzione? Fingere! Sostituiamo la select con una INPUT di testo, dotata di un pulsantino che le consenta di aprire un DIV nascosto che contiene le OPTION.
E' più semplice di quello che sembra...

Vogliamo simulare questo!

<SELECT name="valoreEffettivo" style="width: 100px">
    <OPTION value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1
    <OPTION value="pm3_3.7">PortMaster 3 with ComOS 3.7
    <OPTION value="pm3_3.5">PortMaster 3 with ComOS 3.5
    <OPTION value="pm2_3.7">PortMaster 2 with ComOS 3.7
    <OPTION value="pm2_3.5">PortMaster 2 with ComOS 3.5
    <OPTION value="IRX_3.7R">IRX with ComOS 3.7R
    <OPTION value="IRX_3.5R">IRX with ComOS 3.5R
</SELECT> 

e lo faremo con questo

    <input id="valoreEffettivo" name="valoreEffettivo" type="hidden" value="" />
    <div id="contenitoreSelect" name="contenitoreSelect" class="select">
        <table cellspacing="0" cellpadding="0" border="0"><tr>
            <td width="99%" valign="center">
                <input readonly id="inputvalore" name="inputvalore" type="text" class="inputvalue" value="">
            </td>
            <td valign="center">
                [url="javascript:open();"][img]selectToolTips/select.gif[/img][/url]
            </td>
        </tr></table>
    </div>
    <div id="divmenu" name="divmenu" class="menu" style="display: none">
        <div style="position: relative">
        [url="javascript:valore('pm3_3.7.1','PortMaster 3 with ComOS 3.7.1');"]<NOBR>PortMaster 3 with ComOS 3.7.1</NOBR>[/url]

        [url="javascript:valore('pm3_3.7','PortMaster 3 with ComOS 3.7');"]<NOBR>PortMaster 3 with ComOS 3.7</NOBR>[/url]

        [url="javascript:valore('pm3_3.5','PortMaster 3 with ComOS 3.5');"]<NOBR>PortMaster 3 with ComOS 3.5</NOBR>[/url]

        [url="javascript:valore('pm2_3.7','PortMaster 2 with ComOS 3.7');"]<NOBR>PortMaster 2 with ComOS 3.7</NOBR>[/url]

        [url="javascript:valore('pm2_3.5','PortMaster 2 with ComOS 3.5');"]<NOBR>PortMaster 2 with ComOS 3.5</NOBR>[/url]

        [url="javascript:valore('IRX_3.7R','IRX with ComOS 3.7R');"]<NOBR>IRX with ComOS 3.7R</NOBR>[/url]

        [url="javascript:valore('IRX_3.5R','IRX with ComOS 3.5R');"]<NOBR>IRX with ComOS 3.5R</NOBR>[/url]

        </div>
    </div> 

Occorreranno queste funzioni JS

    function open() {
        if (divmenu.style.display=="none") {
            divmenu.style.display="";
        } else {
            divmenu.style.display="none";
        }
    }
    function valore(valor, desc) {
        inputvalore.value=desc;
        valoreEffettivo.value=valor;
        divmenu.style.display="none";
    } 

e questo codice CSS

.select {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    clean: both;
    border: 1px;
    border-color: #7F9DB9;
    border-style: solid;
    overflow: none;
    width:100px; 
    height:10px;
    padding:1px;
}
.menu {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    clean: both;
    background-color: white;
    border: 1px;
    border-color: black;
    border-style: solid;
    overflow: none;
    padding:2px;
    width:100px; 
    height:100px;
    position: absolute;
    left: expression(document.getElementById("contenitoreSelect").offsetLeft); /* IE5+ only */
    z-index: 30;
}
.inputvalue {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    font-weight:normal;
    margin:0px;
    vertical-align: top;
    border: 0px;
    width:80px; 
}
.linkoption {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    color: black;
    font-weight:normal;
    text-decoration: none;
}

A.linkoption:hover {
    font-family:Arial;
    font-size:13px;
    text-align:left;
    color: white;    
    background-color: #316AC5;
    font-weight:normal;
    text-decoration: none;
} 

Il tutto è funzionate da Internet Explorer 5 in su, ma non funziona per Netscape...
Quindi usate solo se veramente necessario e sempre in abbinamento ad uno script che distingua tra i browser per visualizzare nel caso una semplice SELECT.

Se perfezionate il codice, siete pregati di postare anche qui le modifiche... GRAZIE!