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

Résolu

nyco2222 -
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>

Afficher la suite

A voir également:

Ajouter l'option selected à une liste dérou..
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Liste code ascii - Guide
Ajouter une signature sur word - Guide
Ajouter à l'écran d'accueil iphone - Guide

6 réponses

Réponse 1 / 6

R4f Messages postés 441 Date d'inscription Statut Membre Dernière intervention 62

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

Réponse 2 / 6

nyco2222

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.

Réponse 3 / 6

R4f Messages postés 441 Date d'inscription Statut Membre Dernière intervention 62

Ok, sympa !
A+

Raph

Réponse 4 / 6

nyco2222

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>

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

Posez votre question

Réponse 5 / 6

R4f Messages postés 441 Date d'inscription Statut Membre Dernière intervention 62

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

Réponse 6 / 6

nyco2222

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;
}

Discussions similaires

Comment savoir comment on nous a ajouté sur Snap

ordre alphabetique sous word

Problème de démarrage - boot device and press a key

Votre réponse

Discussions similaires