Ajouter l'option selected à une liste dérou..

Résolu/Fermé
nyco2222 - 14 janv. 2008 à 16:56
 nyco2222 - 16 janv. 2008 à 10:51
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>

6 réponses

R4f Messages postés 441 Date d'inscription dimanche 13 janvier 2008 Statut Membre Dernière intervention 5 mai 2008 62
14 janv. 2008 à 21:10
Bonsoir,


Je viens de faire une recherche et un test sur FF 2, ça marche :


selectOption(document.drop_list.SubCat, 2);

function selectOption(selectbox, index) {
        selectbox.selectedIndex = index;
}


Pour connaître l'indice sélectionné ou pour sélectionner un indice dans une liste, utiliser .selectedIndex

J'ai trouvé l'info ici : http://www.aliasdmc.fr/dom_javascript_html/javascript_html_select_selectedindex.html


Raph
0
Merci bcp Raph !!!

Cela fait vraiment plaisir de voir qu'il y a des gens bien sur cette toile !!! si jamais tu as besoin de quelque chose, logo, conseils vidéos, hardware, multimédia et photo surtout n'hésites pas à me contacter sur www.artik.ch
Je ferai au mieux pour te dépanner!!

N.
0
R4f Messages postés 441 Date d'inscription dimanche 13 janvier 2008 Statut Membre Dernière intervention 5 mai 2008 62
14 janv. 2008 à 23:48
Ok, sympa !
A+

Raph
0
Salut Raph,

juste j'ai encore une question .

Dans le cas où l'on voudrait mettre plusieures fois la sélection dans le même formulaire...
regarde l'image tu comprendras.

En faisant un simple copier-coller ceci ne fonctionne pas. En recopiant le code et les fonctions et en ajoutant 2 après chaque appelle, chaque variables, ceci ne marche tjs pas ... surement que j'ai fait une erreur de syntaxe mais je suis certain qu'il y a des moyens plus faciles pour régler ce problème.

Mercid e ta réponse !!

nyco

<a href src="http://www.plarel.ch/nyco/chambres.jpg">chambres.jpgi</a>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
R4f Messages postés 441 Date d'inscription dimanche 13 janvier 2008 Statut Membre Dernière intervention 5 mai 2008 62
16 janv. 2008 à 00:07
Tu pourrais mettre le code qui marche pas?

A priori, tu as peut-être oublié des 2 quelque part (ou tu en as mis en trop ;-). Le fait qu'on en mette plusieurs dans le même formulaire ne devrait rien changer...

Raph
0
vOILA LE CODE.

J'ai réussi à intégrer les 2 chambres dans 1 form. Cependant, en le testant j'ai remarqué que si p. ex. tu choisis chambre double 1 adulte 1 enfant et que dans l'aoutre chambre tu change ensuite pour une chambre à 4,
Le nombere d'enfant dans la chambre n°1 et le nombre d'adultes se remettent par défaut ....

Tu saurai comment figer une sélection ? la rendre autonome ??

Merci !!!

nYco

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

</head>

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

<FORM name="Form1" action="http://montreal.onlinetravel.ch/hotel/session/default/hotel.cgi" method="POST" >&nbsp;
<label></label>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><select id="Category"  name="Room1" onChange="SelectSubCat();">
    </select></td>
    <td><select id="adulte" name="Room1Adults" onChange="SelectAdCat();">
    </select></td>
    <td><select id="enfant" name="Room1Children">
    </select></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select id="Category2"  name="Room2" onChange="SelectSubCat();">
    </select></td>
    <td><select id="adulte2" name="Room2Adults" onChange="SelectAdCat();">
    </select></td>
    <td><select id="enfant2" name="Room2Children">
    </select></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

<p>&nbsp;</p>
</body>

</html>


function fillCategory(){ 
 // this function is used to fill the category list on load
addOption(document.Form1.Category, "Chambre simple", "Chambre simple", "@SB");
addOption(document.Form1.Category, "Double a deux lits", "Double a deux lits", "@TB");
addOption(document.Form1.Category, "Ch. double grand lit", "Ch. double grand lit", "@DB");
addOption(document.Form1.Category, "Ch. triple", "Ch. triple", "@TR");
addOption(document.Form1.Category, "Ch. quadruple", "Ch. quadruple", "@QR");
selectOption(document.Form1.Category, 1);
addOption(document.Form1.Room1Children, "0", "0");
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Adults, "1", "1");
addOption(document.Form1.Room1Adults, "2", "2");
selectOption(document.Form1.Room1Adults, 1);

///////////////////////////////////
addOption(document.Form1.Category2, "Chambre simple2", "Chambre simple", "@SB");
addOption(document.Form1.Category2, "Double a deux lits2", "Double a deux lits", "@TB");
addOption(document.Form1.Category2, "Ch. double grand lit2", "Ch. double grand lit", "@DB");
addOption(document.Form1.Category2, "Ch. triple2", "Ch. triple", "@TR");
addOption(document.Form1.Category2, "Ch. quadruple2", "Ch. quadruple", "@QR");
selectOption(document.Form1.Category2, 1);
addOption(document.Form1.Room2Children, "0", "0");
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Adults, "1", "1");
addOption(document.Form1.Room2Adults, "2", "2");
selectOption(document.Form1.Room2Adults, 1);

}
function SelectAdCat(){
	removeAllOptions(document.Form1.Room1Children);
	addOption(document.Form1.Room1Children, "0", "0");
	removeAllOptions(document.Form1.Room2Children);
	addOption(document.Form1.Room2Children, "0", "0");
	
// si une chambre double ou une chambre a deux lits est sélectionnée:

if (document.Form1.Room1Adults.selectedIndex=="0" && document.Form1.Category.value=="Double a deux lits"){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Children, "2", "2");
}
if (document.Form1.Room1Adults.selectedIndex=="1" && document.Form1.Category.value=="Double a deux lits"){
addOption(document.Form1.Room1Children, "1", "1");
}

if (document.Form1.Room1Adults.selectedIndex=="0" && document.Form1.Category.value=="Ch. double grand lit"){
	addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Children, "2", "2");
}
if (document.Form1.Room1Adults.selectedIndex=="1" && document.Form1.Category.value=="Ch. double grand lit"){
addOption(document.Form1.Room1Children, "1", "1");
}

// Si une chambre triple est sélectionnée:
if(document.Form1.Category.value=="Ch. triple" && document.Form1.Room1Adults.value=="1"){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Children,"2", "2");
}
if(document.Form1.Category.value=="Ch. triple" && document.Form1.Room1Adults.value=="2"){
	addOption(document.Form1.Room1Children, "1", "1");
	
// Si une chambre quadruple est sélectionnée:
}
if(document.Form1.Category.value=="Ch. quadruple" && document.Form1.Room1Adults.value=="3"){
addOption(document.Form1.Room1Children, "1", "1");

}
if(document.Form1.Category.value=="Ch. quadruple" && document.Form1.Room1Adults.value=="2"){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Children,"2", "2");
}
if(document.Form1.Category.value=="Ch. quadruple" && document.Form1.Room1Adults.value=="1"){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Children,"2", "2");
addOption(document.Form1.Room1Children,"3", "3");
}
/////////////////////////////////////

	
// si une chambre double ou une chambre a deux lits est sélectionnée:

if (document.Form1.Room2Adults.selectedIndex=="0" && document.Form1.Category2.value=="Double a deux lits2"){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Children, "2", "2");
}
if (document.Form1.Room2Adults.selectedIndex=="1" && document.Form1.Category2.value=="Double a deux lits2"){
addOption(document.Form1.Room2Children, "1", "1");
}

if (document.Form1.Room2Adults.selectedIndex=="0" && document.Form1.Category2.value=="Ch. double grand lit2"){
	addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Children, "2", "2");
}
if (document.Form1.Room2Adults.selectedIndex=="1" && document.Form1.Category2.value=="Ch. double grand lit2"){
addOption(document.Form1.Room2Children, "1", "1");
}

// Si une chambre triple est sélectionnée:
if(document.Form1.Category2.value=="Ch. triple2" && document.Form1.Room2Adults.value=="1"){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Children,"2", "2");
}
if(document.Form1.Category2.value=="Ch. triple2" && document.Form1.Room2Adults.value=="2"){
	addOption(document.Form1.Room2Children, "1", "1");
	
// Si une chambre quadruple est sélectionnée:
}
if(document.Form1.Category2.value=="Ch. quadruple2" && document.Form1.Room2Adults.value=="3"){
addOption(document.Form1.Room2Children, "1", "1");

}
if(document.Form1.Category2.value=="Ch. quadruple2" && document.Form1.Room2Adults.value=="2"){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Children,"2", "2");
}
if(document.Form1.Category2.value=="Ch. quadruple2" && document.Form1.Room2Adults.value=="1"){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Children,"2", "2");
addOption(document.Form1.Room2Children,"3", "3");
}
}

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

removeAllOptions(document.Form1.Room1Adults);
removeAllOptions(document.Form1.Room1Children);
addOption(document.Form1.Room1Adults, "1", "1", "1");
addOption(document.Form1.Room1Children, "0", "0", "0");
removeAllOptions(document.Form1.Room2Adults);
removeAllOptions(document.Form1.Room2Children);
addOption(document.Form1.Room2Adults, "1", "1", "1");
addOption(document.Form1.Room2Children, "0", "0", "0");

if(document.Form1.Category.value == 'Chambre simple'){
	selectOption(document.Form1.Room1Children, 0);
}
if (document.Form1.Category.value == 'Double a deux lits'){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Adults, "2", "2");
selectOption(document.Form1.Room1Adults, 1);
selectOption(document.Form1.Room1Children, 0);

}

if (document.Form1.Category.value == 'Ch. double grand lit'){
addOption(document.Form1.Room1Children, "1", "1");
addOption(document.Form1.Room1Adults, "2", "2");
selectOption(document.Form1.Room1Adults, 1);
selectOption(document.Form1.Room1Children, 0);
}
if(document.Form1.Category.value == 'Ch. triple'){
addOption(document.Form1.Room1Adults,"2", "2");
addOption(document.Form1.Room1Adults,"3", "3");
selectOption(document.Form1.Room1Adults, 2);
selectOption(document.Form1.Room1Children, 0);
}

if(document.Form1.Category.value == 'Ch. quadruple'){
addOption(document.Form1.Room1Adults,"2", "2");
addOption(document.Form1.Room1Adults,"3", "3");
addOption(document.Form1.Room1Adults,"4", "4");
selectOption(document.Form1.Room1Adults, 3);
selectOption(document.Form1.Room1Children, 0);
}
//////////////////////////////////////////////////
if(document.Form1.Category2.value == 'Chambre simple2'){
	selectOption(document.Form1.Room2Children, 0);
}
if (document.Form1.Category2.value == 'Double a deux lits2'){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Adults, "2", "2");
selectOption(document.Form1.Room2Adults, 1);
selectOption(document.Form1.Room2Children, 0);

}

if (document.Form1.Category2.value == 'Ch. double grand lit2'){
addOption(document.Form1.Room2Children, "1", "1");
addOption(document.Form1.Room2Adults, "2", "2");
selectOption(document.Form1.Room2Adults, 1);
selectOption(document.Form1.Room2Children, 0);
}
if(document.Form1.Category2.value == 'Ch. triple2'){
addOption(document.Form1.Room2Adults,"2", "2");
addOption(document.Form1.Room2Adults,"3", "3");
selectOption(document.Form1.Room2Adults, 2);
selectOption(document.Form1.Room2Children, 0);
}

if(document.Form1.Category2.value == 'Ch. quadruple2'){
addOption(document.Form1.Room2Adults,"2", "2");
addOption(document.Form1.Room2Adults,"3", "3");
addOption(document.Form1.Room2Adults,"4", "4");
selectOption(document.Form1.Room2Adults, 3);
selectOption(document.Form1.Room2Children, 0);
}
}


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);
}
// this following function is used to select default index of the list
function selectOption(selectbox, index) {
        selectbox.selectedIndex = index;
}
0