Selects dépendants pré-chargés d'une seule option

Commenter

Contenu du snippet

J'ai un formulaire de saisie comportant de nombreuses lignes dans lesquels les mêmes select se répètent.
Résultat : les allés et retours entre le serveur et le navigateur sont lourds.
D'où l'idée
1- De construire les select à la volée à l'aide de tableaux préchargés.
2- En cas de rechargement de renvoyer un select d'une seule ligne contenant la valeur préchargée.

J'ai des rechargements car certaines vérifications sont faites côté serveur et on peut avoir besoin de revalider des lignes anciennes et déjà stockées dans la BDD.

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Tests Popup</title>

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

// Tableaux créés dans la Base :	
var vArr_Data = ["Forfait classique","Forfait special","Forfait super"] ;
var vArr_Data_Volume = [["","Classique 100Mo","Classique 200Mo","Classique 300Mo","Classique 400Mo","Classique 500Mo","Classique 600Mo","Classique 700Mo","Classique 800Mo","Classique 900Mo","Classique 1000Mo","Classique 1100Mo","Classique 1200Mo","Classique 1300Mo","Classique 1400Mo","Classique 1500Mo","Classique 1600Mo","Classique 1700Mo","Classique 1800Mo","Classique 1900Mo","Classique 2000Mo","Classique 2100Mo","Classique 2200Mo","Classique 2300Mo","Classique 2400Mo","Classique 2500Mo","Classique 2600Mo","Classique 2700Mo","Classique 2800Mo","Classique 2900Mo","Classique 3000Mo","Classique 3100Mo","Classique 3200Mo"],["Special 500Mo","Special 800Mo"],["Super 1Go","Super 2Go"]] ;
	
function MakePopUp(obj_id,varr,master) {
var myselect=document.getElementById(obj_id);
var L_NoLines =myselect.options.length;
var val = "";
if(master!="")
{
var myMaster=document.getElementById(master);
if(myMaster)
{
varr = varr[myMaster.selectedIndex]
}
}
if(L_NoLines==1)
{
if(myselect.options[0].selected)
val=myselect.options[0].value;
}
if(L_NoLines<=1)
	{
	myselect.options.length=0;
	for (i=0;i<varr.length;i++){
	myNewOption = new Option(varr[i],varr[i]);
	myselect.options[i]=myNewOption;
	if(val==myselect.options[i].value)
	{myselect.options[i].selected=true;}
		}
	}

}
		
function Make2ndPopUp(second,master,varr) {

var myMaster=document.getElementById(master);
var mySecond=document.getElementById(second);
if(myMaster.options.length==0)
	{mySecond.options.length=0;}
else
	{
mySecond.options.length=0;	
myArr = varr[myMaster.selectedIndex];
MakePopUp(second,myArr);
	}

}

</SCRIPT>

</HEAD>
<BODY bgColor="#ffffff">

Select à une ligne pour le transport aller retour :
Data : <select id="data4" onChange="Make2ndPopUp('volume4','data4',vArr_Data_Volume);" onMouseOver="MakePopUp('data4',vArr_Data,'');"  ><option SELECTED>Forfait classique</option></select>
Volume : <select id="volume4" onMouseOver="MakePopUp('volume4',vArr_Data_Volume,'data4');" ><option SELECTED>Classique 200Mo</option></select>

<hr/>
</BODY>
</HTML>

Conclusion :


Les commentaires et améliorations sont les bienvenus.

A voir également

S'inscrire maintenant

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.

Du même auteur (cs_phm)