rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

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

Posté par nyco2222, le lundi 14 janvier 2008 à 16:56:26
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>

Configuration: Windows XP
Firefox 2.0.0.11
Répondre à nyco2222  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
R4f, le lundi 14 janvier 2008 à 21:10:20
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_s­elect_selectedindex.html


Raph
   
Répondre à R4f

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
nyco2222, le lundi 14 janvier 2008 à 23:40:24
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épondre à nyco2222

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
R4f, le lundi 14 janvier 2008 à 23:48:24
Ok, sympa !
A+

Raph
   
Répondre à R4f

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
nyco2222, le mardi 15 janvier 2008 à 17:01:42
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">ch­ambres.jpgi</a>
   
Répondre à nyco2222

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
R4f, le mercredi 16 janvier 2008 à 00:07:17
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épondre à R4f

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 nyco2222, le mercredi 16 janvier 2008 à 10:51:33
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/d­efault/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;
}
   
Répondre à nyco2222
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Ma Liste d'Achats 2.01Ma Liste d'Achats - Faire les courses est une tâche bien compliquée pour les non initiés. Ma liste d'achats est comme son nom l'indique, un...Catégorie: Environnement de travail
Licence: Freeware/gratuit
Télécharger SpaceTime 1.0SpaceTime - Pour plus de fluidité et d'ergonomie dans vos recherches sur le web, en mode interactif, c'est encore mieux. Space Time est...Catégorie: Internet
Licence: Freeware/gratuit
Télécharger SpamWars 1.0SpamWars - SpamWars permet de vous protéger contre le spam en agissant tel un filtre gérant une liste blanche. A chaque fois qu'un...Catégorie: Antispam
Licence: Freeware/gratuit
Télécharger Windows XP SP2 1.0Windows XP SP2 - Les Service Packs constituent un moyen pratique, tout en un, d'accéder aux derniers pilotes, outils et améliorations en...Catégorie: Librairies (DLL)
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « Ajouter l'option selected à une liste dérou.. »