Sélection multiple

par **Ryle** » 14 déc. 2007, 13:07

AJAX n'est pas LA solution. Ajax est une solution te permettant d'intérroger le serveur sans actualiser la page et ça s'arrête là

En effet, vu ton script, tu peux tout aussi bien générer ta page avec php, et constuire ton code javascript dans des boucles php qui renseigneront ton script avec tous les pays / région / villes que tu as en base. L'avantage, ton code js ne change pas (gain de temps), l'inconvénient, c'est que si la liste est importante, c'est beaucoup plus long et lourd à l'ouverture de la page (problème de performance).

Si tu optes pour Ajax, l'idée est de proposer une liste de pays et lors de la selection de l'un d'entre eux, interroger un script sur le serveur qui te retournera la liste des régions associées pour que tu les affiches dans ta seconde liste. Puis lors de la selection d'une région, la liste des villes associées... regarde dans la FAQ il y a un tuto pour comprendre Ajax et un autre plus proche de ce que tu veux faire sur les listes déroulantes liées avec Ajax.

Le soucis, c'est que du coup ta construction d'objets, leur parcours etc. ne te serviront plus et à mon avis, tu iras plus vite à refaire un script dédié au fonctionnement avec ajax qu'à essayer d'adapter celui là

par **ayntic** » 14 déc. 2007, 11:47

Bonjour !
J'ai développé ce script qui me permet de faire des choix bien précis dans des SELECT. (Vous pouvez l'essayez).
Le problème est que je dois récupérer toutes les données affichées dans les SELECT à partir d'une BD.
On m'a dis que AJAX était la solution, mais je n'y arrive pas. SVP, j'ai besoin de votre aide !!!!
Merci


<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">

var menu=new CreerMenu(3," 1 - Choisir un pays  ","  2 - Choisir une region  ","  3 - Choisir une ville  ","titre 4","_blank");

menu.Add(1,"Côte d'Ivoire","");
	menu.Add(2,"Région des lacs","");
		menu.Add(3,"Yamoussoukro","#");
		menu.Add(3,"Didiévi","#");
		menu.Add(3,"Tiebissou","#");
	menu.Add(2,"Région des lagunes","");
		menu.Add(3,"Cocody","#");
		menu.Add(3,"Yopougon","#");
	menu.Add(2,"Région du Sud comoé","");
		menu.Add(3,"Aboisso","#");
		menu.Add(3,"Maferé","#");
		menu.Add(3,"Ayamé","#");

menu.Add(1,"France","");
	menu.Add(2,"Alsaces","");
		menu.Add(3,"Bas-Rhin","#");
		menu.Add(3,"Haut-Rhin","#");
		
	menu.Add(2,"Lorraine","");
		menu.Add(3,"Meurthe-et-Moselle","#");
		menu.Add(3,"Meuse","#");
	menu.Add(2,"Limousin","");
		menu.Add(3,"Corèze","#");
		menu.Add(3,"Creuse","#");
		menu.Add(3,"Haute-Vienne","#");


function CreerMenu(profondeur,titre1,titre2,titre3,titre4,target) {
	this.nb=0;this.prof=profondeur;
	this.titre1=titre1; this.titre2=titre2; this.titre3=titre3; this.titre4=titre4; this.target=target
	this.Add=AddObjet;
	this.Aff=AffMenu;
}
function AddObjet(deep,txt,page) {
	var rub = new Object;
	rub.deep=deep;
	rub.txt=txt;
	rub.page=page;
	this[this.nb]=rub;
	this.nb++;
}
function AffMenu() {
	var Z="<FORM name='mf'>";
	Z+="<SELECT size=1 name='list1' onChange='Clic(1)'><OPTION selected>"+this.titre1+"</OPTION>";
	for (var i=0;i<this.nb;i++) {
		if (this[i].deep==1) {
			Z+="<OPTION value='"+i+"'>"+this[i].txt+"</OPTION>"
		}
	}
	Z+="</SELECT>";
	for (var i=2;i<=menu.prof;i++) {
		Z+="<SELECT name='list"+i+"' onChange='Clic("+i+")'><OPTION>"+eval("menu.titre"+i)+"</OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION><OPTION></OPTION></SELECT>";
	}
	Z+="</FORM>";
	document.write(Z);
}
function add() {
	var c=new Option("ADD","",true,true);
	document.forms[0].elements["list"].options[0]=c;
}
function Clic(no) {
	var valeur=document.forms["mf"].elements["list"+no].options[ document.forms["mf"].elements["list"+no].selectedIndex].value;
	if ((valeur!="")&&(valeur!=null)&&(no<menu.prof)) {
		var deep=menu[valeur].deep;
		var no2=1;
		for (var noX=(no+1);noX<=menu.prof;noX++) {
			document.forms["mf"].elements["list"+eval(noX)].options.length=0;
			var titre=eval("menu.titre"+noX);
			var c=new Option(titre);
			document.forms["mf"].elements["list"+(noX)].options[0]=c;
			document.forms["mf"].elements["list"+(noX)].selectedIndex=0;
		}
		valeur++;
		for (var i=valeur;i<menu.nb;i++) {
			if (menu[i].deep==deep+1) { 
				var c=new Option(menu[i].txt,i);
				document.forms["mf"].elements["list"+(no+1)].options[no2]=c;
				no2++;
			} else { if (menu[i].deep==deep){i=menu.nb;}}
		}
		document.forms["mf"].elements["list"+(no+1)].options.length=no2+1;
		document.forms["mf"].elements["list"+(no+1)].selectedIndex=0;
		Clic(no+1)
		valeur--;
	}
	if ((valeur!="")&&(valeur!=null)) {
		var page=menu[valeur].page;
		if ((page!="")&&(page!=null)) {
			if (menu.target=="self") {window.location=page}
			else if (menu.target=="_blank") {window.open(page,"","menubar,scrollbars,toolbar,status,location")}
			else {parent.frames[menu.target].location.href=page;}
		}
	}
}

function space(i) {var Z="";for (var j=0;j<i;j++){Z+="&nbsp;&nbsp;&nbsp;&nbsp;";}return Z}
function Arbo(m) {
	var Z="<BR>";
	for (var i=0;i<m.nb;i++) {
		Z+=space(m[i].deep)+m[i].txt+"&nbsp;&nbsp; <A href='"+m[i].page+"'>"+m[i].page+"</A><BR>"
	}
	document.write(Z);	
}


</SCRIPT>
</HEAD>

<BODY bgcolor="#FFFFFF" text="#FFFFFF" alink="#000066" link="#000066" vlink="#000066">
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<BR>

<SCRIPT language="JavaScript">
	menu.Aff();
</SCRIPT>

<BR>
</FONT></BODY></HTML>

Sélection multiple

Répondre

Étendre la vue Revue du sujet : Sélection multiple

Sélection multiple