Liste déroulante

cs_JMO Messages postés 1854 Date d'inscription jeudi 23 mai 2002 Statut Membre Dernière intervention 24 juin 2018 - 26 mai 2003 à 09:57
yanndroniou Messages postés 24 Date d'inscription lundi 28 juillet 2003 Statut Membre Dernière intervention 5 septembre 2006 - 31 juil. 2003 à 11:42
Bonjour,

Je suis tout nouveau en JavaScript.

J'apprends en solo avec un tutétoriel en ligne (Matizha Sublime).

Je me suis inspiré d'un code "Liste déroulante avec les noms de pays" pour essayer de faire un annuaire téléphonique.

J'arrive à faire apparaitre mes noms (o magie !!!), mais comment peut-on associer les numéros de téléphones (genre alert , checkbox ou popup) ?????

J'ai rajouté une variable "telephone" que je n'arrive pas à utiliser.
Le but de ma liste déroulante serait de cliquer sur un nom de l'annuaire pour faire apparaitre une nouvelle fenetre dans laquelle figurerait le numéro de téléphone.

Je remercie par avance les personnes susceptibles de m'aider.

<HTML>
<HEAD>
<TITLE>JScript - Annuaire téléphonique par liste déroulante</TITLE>
<META NAME= "Generator" CONTENT="Matizha Sublime 3.0">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
</HEAD>

<HTML><HEAD>
<TITLE>Répertoire téléphonique avec recherche par clavier</TITLE>
<SCRIPT LANGUAGE="JavaScript">

var Liste=new CreerListe("Nom", "Telephone", 5, 200)

Liste.Add("AAAA Jean-Marc","Tél.:04.78.79.00.00 - 06.xx.xx.xx.xx");
Liste.Add("ALLIROL Anne-Marie","04.78.79.00.00");
Liste.Add("AZZOUG Karim","04.78.79.00.00");
Liste.Add("BARRIOZ François","04.78.79.00.00");
Liste.Add("BENAISSA Mohamed","04.78.79.00.00");
Liste.Add("BENJAMIN Pascal","04.78.79.00.00");
Liste.Add("BOUABSA Sophiane","04.78.79.00.00");
Liste.Add("BOURGIN Jacky","04.78.79.00.00");
Liste.Add("BOUZON Gérard","04.78.79.00.00");
Liste.Add("BOUZON Robert","xx.xx.xx.xx.xx");
Liste.Add("BRANT Luc","04.78.79.00.00");

function CreerListe(nom, telephone, hauteur, largeur) {
this.nom=nom; this.hauteur=hauteur; this.largeur=largeur; this.telephone=telephone;
this.search="";
this.nb=0;
this.Add=AjouterItem;
this.Afficher=AfficherListe;
this.MAJ=MAJListe;
}

function AjouterItem(item) {
this[this.nb]=item
this.nb++;
}

function AfficherListe() {
if (document.layers) {
var Z="<SELECT name="+this.nom+" size="+this.hauteur+">";
} else {
var Z="<SELECT name="+this.nom+" size="+this.hauteur+" style='width:"+this.largeur+"'>";
}
for (var i=0; i<this.nb; i++) {
Z+="<OPTION value=""+this[i]+"">"+this[i]+"</OPTION>"
}
Z+="</SELECT>"
document.write(Z);
}

function MAJListe(txt,f) {
if (txt!=this.search) {
this.search=txt
f.elements[this.nom].options.length=0;
for (var i=0; i<this.nb; i++) {
if ( this[i].substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) {
var o=new Option(this[i], this[i]);
f.elements[this.nom].options[f.elements[this.nom].options.length]=o;
}
}
if (f.elements[this.nom].options.length==1) {
f.elements[this.nom].selectedIndex=0;
}
}
}

function ListeCheck() {
Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"])
if (document.layers) {
setTimeout("ListeCheck()", 1001)
} else {
setTimeout("ListeCheck()", 100)
}
}



function AfficheHeure() {
var dt=new Date();
var heure=dt.getHours();
var min=dt.getMinutes(); if (min<10) {min="0"+min;}
var sec=dt.getSeconds(); if (sec<10) {sec="0"+sec;}
window.status="Il est exactement: "+heure+":"+min+":"+sec+""
setTimeout("AfficheHeure()",1000);
}

</SCRIPT>
</HEAD>

<CENTER>
Répertoire téléphonique avec recherche par clavier

</CENTER>

Tapez les premières lettres du nom recherché dans la zone de texte.

<FORM name =monform>

<SCRIPT language=javascript>
Liste.Afficher();
ListeCheck();
AfficheHeure()

</SCRIPT>
</FORM>

</CENTER>

</HTML>


Jean-Marc

1 réponse

yanndroniou Messages postés 24 Date d'inscription lundi 28 juillet 2003 Statut Membre Dernière intervention 5 septembre 2006
31 juil. 2003 à 11:42
;) Yann Droniou :-p :approve)

Voilà + des petites options

y.droniou@voila.fr

<HTML>
<HEAD>
<TITLE>JScript - Annuaire téléphonique par liste déroulante</TITLE>
<META NAME= "Generator" CONTENT="Matizha Sublime 3.0">
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="">
</HEAD>

<HTML><HEAD>
<TITLE>Répertoire téléphonique avec recherche par clavier</TITLE>
<SCRIPT LANGUAGE="JavaScript">

var Liste=new CreerListe("NP", 5, 200)
Liste.Add("AAAA Jean-Marc","Tél.:04.78.79.00.00 - 06.xx.xx.xx.xx");
Liste.Add("ALLIROL Anne-Marie","04.78.79.00.00");
Liste.Add("AZZOUG Karim","04.78.79.00.00");
Liste.Add("BARRIOZ François","04.78.79.00.00");
Liste.Add("BENAISSA Mohamed","04.78.79.00.00");
Liste.Add("BENJAMIN Pascal","04.78.79.00.00");
Liste.Add("BOUABSA Sophiane","04.78.79.00.00");
Liste.Add("BOURGIN Jacky","04.78.79.00.00");
Liste.Add("BOUZON Gérard","04.78.79.00.00");
Liste.Add("BOUZON Robert","xx.xx.xx.xx.xx");
Liste.Add("BRANT Luc","04.78.79.00.00");

function CreerListe(nom, hauteur, largeur) {
this.nom=nom; this.hauteur=hauteur; this.largeur=largeur;
this.search="";
this.nb=0;
this.Add=AddItem;
this.Afficher=AfficherListe;
this.MAJ=MAJListe;
}

function AddItem(Perso,Autre,Tell,Addres) {

var item = new Object;
item.Perso=Perso;
item.Tell=Tell;
item.Autre=Autre;
item.Addres=Addres;
this[this.nb]=item
this.nb++;
}

function AfficherListe() {
if (document.layers) {
var Z="<SELECT name="+this.nom+" size="+this.hauteur+">";
} else {
var Z="<SELECT name="+this.nom+" size=10 style='width:200' onChange='Afficher(this.value)'>";
}
document.all.nbrvalue.innerText=this.nb
for (var i=0; i<this.nb; i++) {
Z+="<OPTION value="+i+" >"+this[i].Perso+"</OPTION>"
}
Z+="</SELECT>"
document.write(Z);
}

function MAJListe(txt,f) {
if (txt!=this.search) {
this.search=txt
f.elements[this.nom].options.length=0;
for (var i=0; i<this.nb; i++) {
if ( this[i].Perso.substring(0,txt.length).toUpperCase()==txt.toUpperCase() ) {
var o=new Option(this[i].Perso,i );
f.elements[this.nom].options[f.elements[this.nom].options.length]=o;
}
}
if (f.elements[this.nom].options.length==1) {
f.elements[this.nom].selectedIndex=0;
}
}
}

function ListeCheck() {
Liste.MAJ(document.forms["monform"].search.value,document.forms["monform"])
if (document.layers) {
setTimeout("ListeCheck()", 1001)
} else {
setTimeout("ListeCheck()", 100)
}
}

function Afficher(Nom)
{
NOM=Liste[Nom].Perso
AUTRE=Liste[Nom].Autre
TEl=Liste[Nom].Tell
ADRESSE=Liste[Nom].Addres
TELMOIN=TEl.substring(0,5)
TELPLUS=TEl.substring(5,TEl.length)
ADRESSEMOIN=ADRESSE.substring(0,9)
ADRESSEPLUS=ADRESSE.substring(9,ADRESSE.length)

document.all.nompre.innerText="Nom : "+NOM
document.all.autre.innerText=AUTRE

if(TELMOIN!="/Tel/")
document.all.tel.innerText="Tel : "+TEl
else
document.all.tel.innerText=TELPLUS

if(ADRESSEMOIN!="/Adresse/")
document.all.adresse.innerText="Adresse : "+ADRESSE
else
document.all.adresse.innerText=ADRESSEPLUS

}

function Listea()
{
NBR=nbrvalue.innerText
Z='[javascript:window.history.go(-1) Retour]

Nombre de la liste :'+NBR+'
Nom, Teléphone, Adresse, '

for(m=0;m<NBR;m++)
{
nom=Liste[m].Perso
tell=Liste[m].Tell
adressea=Liste[m].Addres
telmoin=tell.substring(0,5)
telplus=tell.substring(5,tell.length)
adressemoin=adressea.substring(0,9)
adresseplus=adressea.substring(9,adressea.length)

if(adressemoin==\"/Adresse/\")
adressea=adresseplus
if(telmoin==\"/Tel/\")
tell=telplus
if(adressea==\"\")
adressea=\"?\"
if(tell==\"\")
tell=\"?\"

Z+='----
'+nom+', '+tell+', '+adressea+', '
}

Z+='
'
document.write(Z)
}

</SCRIPT>
</HEAD>

<CENTER>
Répertoire téléphonique avec recherche par clavier

</CENTER>

Tapez les premières lettres du nom recherché dans la zone de texte.

[javascript:Listea() Afficher la liste]

Nombre de liste :

<FORM name =monform>

<SCRIPT language= javascript>
Liste.Afficher();
ListeCheck();
</SCRIPT>

</FORM>

</SCRIPT>
</FORM>

</CENTER>

</HTML>
0
Rejoignez-nous