SELECT OPTION SELECTED kécako ??? [Résolu/Fermé]

Signaler
-
 Jbco -
Bonjour,

Voila cela fait un bon moment que je cherche à optimiser ce code hyper pratique pour faire des menus déroulants dynamiques en javascript.

Le code fonctionne mais je n'arrive pas à sélectionner PAR DEFAUT un élément dans la liste en utilisant l'objet SELECTED comme on fait d'habitude avec HTML. Comme ce code est généré dynamqiuement je ne sais pas comment ajouter cette fonction....
merci d'éclairer ma lenterne pour ceux qui y arrive !!!!!!


Avec mes remerciements,

Nyco

Le javascript:

function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.drop_list.Category, "Fruits", "Fruits", "");
addOption(document.drop_list.Category, "Games", "Games", "");
addOption(document.drop_list.Category, "Scripts", "Scripts", "");
}

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}
////////////////// 

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}


function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}





le HTML:

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>(Type a title for your page here)</title>
<script language="javascript" src="list.js"></script>
</head>

<body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000" onload="fillCategory();">

<FORM name="drop_list" action="yourpage.php" method="POST" >
		
<SELECT  NAME="Category" onChange="SelectSubCat();" >
<Option value="">Category</option>
</SELECT> 
<SELECT id="SubCat" NAME="SubCat">
<Option value="">SubCat</option>
</SELECT>
</form>

</body>

</html>

4 réponses

Bonjour à tous

je sais pas si tu en as encore besoin mais voici ta solution. En effet elle est plus que simple mais on peut comprendre que tu n'es pas programmeur.

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", "");

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango");
addOption(document.drop_list.SubCat,"Banana", "Banana");
addOption(document.drop_list.SubCat,"Orange", "Orange");
document.drop_list.SubCat.value = "Orange";
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket");
addOption(document.drop_list.SubCat,"Football", "Football");
addOption(document.drop_list.SubCat,"Polo", "Polo", "");
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP");
addOption(document.drop_list.SubCat,"ASP", "ASP");
addOption(document.drop_list.SubCat,"Perl", "Perl");
}

}


Ca c'est la version basique. Le mieux étant de rajoutant 1 paramètre à la fonction addOption qui sera une sorte de booléen (0 ou 1) pour lui indiquer si la nouvelle option sera celle sélectionnée ou pas. Ci-dessous les deux fonctions avec les rajouts en italique-souligné-gras :

function SelectSubCat(){
// ON selection of category this function will work

removeAllOptions(document.drop_list.SubCat);
addOption(document.drop_list.SubCat, "", "SubCat", """, 0);

if(document.drop_list.Category.value == 'Fruits'){
addOption(document.drop_list.SubCat,"Mango", "Mango", 1);
addOption(document.drop_list.SubCat,"Banana", "Banana", 0);
addOption(document.drop_list.SubCat,"Orange", "Orange", 0);
}
if(document.drop_list.Category.value == 'Games'){
addOption(document.drop_list.SubCat,"Cricket", "Cricket", 1);
addOption(document.drop_list.SubCat,"Football", "Football", 0);
addOption(document.drop_list.SubCat,"Polo", "Polo", "", 0);
}
if(document.drop_list.Category.value == 'Scripts'){
addOption(document.drop_list.SubCat,"PHP", "PHP", 0);
addOption(document.drop_list.SubCat,"ASP", "ASP", 1);
addOption(document.drop_list.SubCat,"Perl", "Perl", 0);
}

}

function addOption(selectbox, value, text, txt_selected)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
if(txt_selected==1){
		selectbox.value = optn.text;
	}
}


Bon prog' !
Jbco
4
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 60511 internautes nous ont dit merci ce mois-ci

Messages postés
3641
Date d'inscription
jeudi 16 juin 2005
Statut
Membre
Dernière intervention
21 octobre 2020
972
Si tu n'avais pas fait l'impatient au bout de seulement 3 minutes (!!), je t'aurais surement répondu, car ce n'est pas très compliqué.
Désolé de 'avoir fait l'impatient mais je te jusre que la la page elle commence à me sortir de partout ... je la transpire même...
je sais que ce n'est pas compliqué à résoudre mais moi tu vois j suis designer à la base pas programmeur ... du coup le code ca me rend nerveux .

:D

mais tu vois pendant ce temps la je répond à d'autres questions qui sont justement à ma portée EG graphisme, 3d, etc ...
mais bon .

Merci à toi si tu as toujours le temps de répondre !!

Nyco
Alors les copains vous n'êtent pas la aujours hui ??