Soyez le premier à donner votre avis sur cette source.
Snippet vu 34 101 fois - Téléchargée 28 fois
<html> <head> <title>Liste déroulante éditable</title> <script language="JavaScript" type="text/javascript"> <!-- // Tableau contenant les éléments de la liste. var listes; listes= new Array(); listes[0]="http://www.javascriptfr.com"; listes[1]="http://www.aspfr.com"; listes[2]="http://www.delphifr.com"; listes[3]="http://www.asp-irine.com"; listes[4]="http://msdn.microsoft.com/library"; listes[5]="http://www.asp-magazine.com"; listes[6]="http://devedge.netscape.com/"; listes[7]="http://www.w3.org"; listes[8]="http://www.laltruiste.com"; listes[9]="http://www.3dvf.com"; listes[10]="http://www.allapi.net"; listes[11]="http://www.wotsit.org"; listes[12]="http://therionweb.de/"; listes[13]="http://www.asp-php.net/"; listes[14]="http://phidels.com/"; // Classe la liste par ordre alphabétique. listes.sort(); // Ajuste la taille des objets par rapport à la taille du champ texte. function Init() { cadre.style.pixelLeft=ObjListe.offsetLeft; cadre.style.pixelTop=ObjListe.offsetTop+ObjListe.offsetHeight; cadre.style.width=ObjListe.scrollWidth; liste.style.width=ObjListe.scrollWidth; document.form.champ.focus(); } // 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"; } // Affichage de l'élément sélectionné dans le champ texte. function Selecte() { var objet; objet=event.srcElement; document.form.champ.value=objet.innerHTML; } // Efface toutes les cellules du tableau.(Tous les éléments de la liste) function EffacCell() { var e; e=new Enumerator(liste.rows); for (;!e.atEnd();e.moveNext()) { liste.deleteRow(e.item().rowIndex); } } // Crée une cellule. (Un élément dans la liste.) function CreaCell() { var ligne, cellule; ligne=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; onclick=Selecte; innerHTML=listes[i]; // Insère le texte dans la cellule. } } // Cherche toutes les occurrences du champ texte dans le tableau de la liste. function Cherche() { var text, temp; EffacCell(); text=document.form.champ.value; text=text.toLowerCase(); // Change le texte en minuscule pour simplifier. for (i=0;i<listes.length;i++) { temp=listes[i]; temp=temp.toLowerCase(); // Position de recherche: 7 pour enlever "http://" // et 11 pour enlever "http://www." // 0 pour chercher à partir du premier caractère. if (temp.indexOf(text)==7 || temp.indexOf(text)==11 || temp.indexOf(text)==0) { CreaCell(); // Crée un élément pour chaque occurrence trouvée. } } cadre.style.visibility="visible"; } // Affiche la liste lorsque l'on click sur la flèche. function Deroule() { var e, objet; objet=event.srcElement; // Efface la liste pour éviter qu'elle se EffacCell(); // répète. if (objet.id!="down") { // Cache la liste si l'on a pas clicker cadre.style.visibility="hidden"; // sur la flèche. } else { for (i=0;i<listes.length;i++) { // Crée tous les éléments de la liste. CreaCell(); } cadre.style.visibility="visible"; } } //--> </script> </head> <body bgcolor="#FFFFFF" text="#000000" onload="javascript:Init();" onclick="javascript:Deroule();"> <form name="form"> <!-- Tableau contenant le champ texte et la flèche. //--> <div nowrap id="ObjListe" style="border-width:2;border-style:inset;border-color:white;width:0;display:inline;"> <input type="text" value="" name="champ" size="20" style="border-width:0;font-size:14;" onkeyup="javascript:Cherche();"> <input id="down" type="button" value="6" style="line-height:0;height:18;font-family:webdings;font-size:10;"> </div> <!-- Tableau contenant la liste de sélection. --> <div id="cadre" style="position:absolute;height:100;visibility:hidden;border-width:1;border-style:solid;border-color:black;overflow-x:hidden;overflow-y:scroll;"> <table id="liste" border="0" cellpadding="0" cellspacing="0"> </table> </div> </form> </body> </html>
mais comment faire pour que ça marche sur FIREFOX ??
svp c trés urgent
merci
Je ne veux pas être bêbête, mais qu'es-ce que c'est supposé de faire ce source? J'utilise IE7 et tout ce que je vois, c'est un drop list avec des URL que je peux sélectionnés. Mais es-ce que sa devrait diriger mon browser sur une des page sélectionnées?
Je n'est pas la prétention de dire que je connais bien l'ASP, mais je suis dans une impasse depuis qq jours. En fait, je suis à la recherche d'un bout de code qui puisse me permettre de générer 4 listes pour sélectionner famille ou goupe ou sous-groupe ou type de résultat et de générer une table qui puisse me donner comme titre la famille et/ou le groupe et/ou le sous-groupe et/ou le type avec des rows de différentes couleurs (gris, blanc)... Qui peut m'aider?
Salut et merci d'avoir pris le temps de me lire, au plaisir d'avoir de vos nouvelles sous peu.
moi je suis une débutante dans la programmation et là j'ai un problème. j'ai créé une liste déroulante avec des options dedans. à coté de cette liste figure un champ de saisie. j'aimerai qu'à chaque fois que je sélectionne une option (un clic sur l'option)elle apparaisse dans le champ de saisie. la suivante sélectionnée se met derrière la première et ainsi de suite.
Pouvez-vous m'aider svp??? c hyper urgent.
Merci d'avance
à+
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.