COMBOBOX DE TAILLE INFÈRIEUR À SON CONTENU

<script language="JavaScript" type="text/javascript">

// Tableaux contenant les éléments de la liste.
var Obj1Table;
Obj1Table= new Array();
Obj1Table[0]="http://phidels.com/";
Obj1Table[1]="http://www.codes-sources.com";
Obj1Table[2]="http://www.delphifr.com";
Obj1Table[3]="http://www.asp-irine.com";
Obj1Table[4]="http://msdn.microsoft.com/library";
Obj1Table[5]="http://www.asp-magazine.com";
Obj1Table[6]="http://devedge.netscape.com/";
Obj1Table[7]="http://www.w3.org";
Obj1Table[8]="http://www.laltruiste.com";
Obj1Table[9]="http://www.3dvf.com";
Obj1Table[10]="http://www.allapi.net";
Obj1Table[11]="http://www.wotsit.org";
Obj1Table[12]="http://therionweb.de/";
Obj1Table[13]="http://www.asp-php.net/";
Obj1Table[14]="http://phidels.com/";


var Obj2Table;
Obj2Table= new Array();
Obj2Table[0]="Marie-Louise Dupont";
Obj2Table[1]="Marie-Chantale Dupont";
Obj2Table[2]="Stéphane de la Brigandiere";
Obj2Table[3]="Jean-Martin du Chateau le Neuf";
Obj2Table[4]="John Fitzgerald Kennedy";
Obj2Table[5]="Machin avec un sacré nom à rallonge";



// Classe les listes par ordre alphabétique.
Obj1Table.sort();
Obj2Table.sort();


// Mise en sur brillance de l'élément survolé.
function RollOver()
{
    var objet;
    objet=event.srcElement;
    objet.style.backgroundColor="highlight";
    objet.style.borderWidth="1";
    objet.style.borderStyle="dashed";
    objet.style.borderColor="black";
    objet.style.color="white";
}

// Retour à l'état normal de l'élément de la liste.
function RollOut()
{
    var objet;
    objet=event.srcElement;
    objet.style.backgroundColor="white";
    objet.style.borderWidth="0";
    objet.style.color="black";
}

// Efface toutes les cellules du tableau.(Tous les éléments de la liste)
function EffacCell(h)
{
    // Construction du nom de la table liste(i)
    var liste = 'liste'+h

    var e;
    e=new Enumerator(eval(liste).rows);
    for (;!e.atEnd();e.moveNext())
    {
	eval(liste).deleteRow(e.item().rowIndex);
    }
}

// Affiche la liste lorsque l'on click sur la flèche.
function Deroule(MonDiv,N)
{
    // Construit le nom du Div Obj(i)Cadre
    var cadre = MonDiv.id+'Cadre';
    // Construit le nom de la table javascript Obj(i)Table ( cf plus haut )
    var MaTable = MonDiv.id+'Table';
    // Construit le nom du bouton down(i)
    var down = 'down'+N
    // Construit le nom de la table dans laquelle le texte va s'afficher
    var liste = 'liste'+N

    var e, objet;
    objet=event.srcElement;   // Efface la liste pour éviter qu'elle se
    EffacCell(N);       // répète.
    if (objet.id!=down)
    {   // Cache la liste si l'on a pas clicker
	eval(cadre).style.visibility="hidden";  // sur la flèche.
    }
    else
    {
	for (i=0;i<MaTable.length;i++)
	{    // Crée tous les éléments de la liste.
	    var ligne, cellule;
	    ligne=eval(liste).insertRow();     // Insère une ligne dans le tableau.
	    cellule=ligne.insertCell();    // Insère une cellule dans la ligne.
	    with (cellule)
	    {
		noWrap=true;       // Définit les propriétés
		style.cursor="default";     // et événements.
		onmouseout=RollOut;
		onmouseover=RollOver;
		innerHTML=eval(MaTable)[i];     // Insère le texte dans la cellule.
	    }
	}
	eval(cadre).style.visibility="visible";
    }
}

// Copie la ligne choisie dans la textbox et
// Ferme le cadre
function FermeCadre(MonDiv,N)
{
    var cadre = MonDiv.id
    // ATTENTION, le nom du FORM est fixe
    var champ = 'document.form.'+MonDiv.id+'Champ'
    var objet;
    objet=event.srcElement;
    eval(champ).value=objet.innerHTML;
 
    eval(cadre).style.visibility="hidden";
}

</script>


</head>

<form name="form">
    <table width="200" border=1>
	<tr>
	    <td>
<%
' Et en prime la fonction ASP pour construire les éléments nécessaire
		function PetiteCombo(NumCombo,WidthTable,SizeTxt)
		    'Numéro d'idetification de la combo
		    i= NumCombo
		    'Taille de la table contenant la liste d'élément
		    TailleTable = WidthTable
		    Taille de la textbox
		    TailleTxt = SizeTxt

		    response.write "<div nowrap id=""Obj"&i&""" style=""border-width:2;border-style:inset;border-color:white;width:0;display:inline;"" onclick=""javascript:Deroule(this,"&i&");"">"&vbcrlf
		    response.write "	<input type=""text"" readonly value="""" name=""Obj"&i&"CadreChamp"" size="&TailleTxt&""" >"&vbcrlf
		    response.write "	<input id=""down"&i&""" type=""button"" value=""6"" style=""line-height:0;height:18;font-family:webdings;font-size:10;"">"&vbcrlf
		    response.write "</div><br>"&vbcrlf
		    
		    response.write "<div id=""Obj"&i&"Cadre"" style=""position:absolute;height:100;visibility:hidden;background-color:white;border-width:1;border-style:solid;border-color:black;overflow-x:hidden;overflow-y:scroll;"" onclick=""javascript:FermeCadre(this,"&i&");"">"&vbcrlf
		    response.write "	<table id=""liste"&i&""" width="&TailleTable&""" border=""0"" cellpadding=""0"" cellspacing=""0""></table>"&vbcrlf
		    response.write "</div>"
		end function

		    'Appelle de la fonction pour créer une premiere combo
		PetiteCombo 1,260,20
%>
	    </td>
	</tr>
	<tr>
	    <td>
<%
		    'Création d'une deuxieme Combo
		PetiteCombo 2,260,20
%>

	    </td>
	</tr>
    </table>
<br>
<!-- Pour vérifier que ma combo passe bien au-dessus d'un texte

<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA
<br>BLABLA

</form>
</body>
</html>