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

Question

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>

Jbco · Accepted Answer

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

nyco2222 · Answer

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

Reivax962 · Answer

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é.

nyco2222 · Answer

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

SELECT OPTION SELECTED kécako ???

4 réponses

Discussions similaires

Newsletters