[Javascript] Problème sur Select...

Résolu
reaverlost Messages postés 150 Date d'inscription   Statut Membre Dernière intervention   -  
nbeland Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Voila, J'ai deux éléments "Select", un qui contient une petite liste de pays, et l'autre qui contient différents types d'hébergement.

J'aimerai que, en fonction du pays choisi, un certain nombre d'hébergement s'affichent dans la liste des hébergements.

Exemple : Si je choisis "Afrique du Sud", je veux que dans la liste des hébergements, il n'y ait que "Hotel de luxe" et "Camping".

Si je choisis Namibie, il ne doit y avoir que "Hotel classique".

C'est possible?

Merci à vous :)

PS: Je débute dans le Javascript.

8 réponses

Réponse 1 / 8
xamurai Messages postés 223 Date d'inscription   Statut Membre Dernière intervention   15
 
ton tableau est mal formater: je te conseil de souvent utiliser firefox pour tester des pages. et d'installer Firebug dans firefox. 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js">
</script>

<script type="text/javascript">
	
			var lesOptions2  = new Array('<option value="Hotel/Guest House classique">Hotel/Guest House classique</option>	'
                                  +'<option value="Hotel/Guest House supérieur">Hotel/Guest House supérieur</option>'
                                  +'<option value="Hotel/Guest House de luxe">Hotel/Guest House de luxe</option>',
			                            +'<option value="Camping">camping</option><option value="Lodge supérieur">camping</option>'
                                  +'<option value="Lodge supérieur">Lodge supérieur</option>');
			function changer(tag, valeurOption) 
			{ 
				switch(valeurOption)
				{
				  case "Afrique du Sud":
					$("#"+tag).html(lesOptions2[0]);
				  break;
				  
				  case "Zimbabwe":
					$("#"+tag).html(lesOptions2[0]);
				  break;
				  
				  case  "Botswana":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  case  "Zambie":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  case  "Namibie":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  default :break;
				}
			} 

	</script>
</head>
<body>
<select name="objet" id="objet" class="normal" 
		onchange="changer('hebergement',this.options[this.selectedIndex].value);">

	 <option value="aucun"> --- Sélectionnez une destination --- </option>
	<option value="Afrique du Sud">Afrique du Sud</option>
	<option value="Namibie">Namibie</option>
	<option value="Botswana">Botswana</option>
	<option value="Zimbabwe">Zimbabwe</option>
	<option value="Zambie">Zambie</option>
	</select>

<select name="hebergement" id="hebergement" class="normal" >
			
</select>
</body>
</html>
1
Réponse 2 / 8
xamurai Messages postés 223 Date d'inscription   Statut Membre Dernière intervention   15
 
utilise du javascript
0
Réponse 3 / 8
reaverlost Messages postés 150 Date d'inscription   Statut Membre Dernière intervention   21
 
xamurai --> C'est ce que j'essaye de faire depuis tout à l'heure, seulement quoi que je fasse, rien ne s'affiche dans la liste d'hébergements.

Merci encore.
0
Réponse 4 / 8
xamurai Messages postés 223 Date d'inscription   Statut Membre Dernière intervention   15
 
voici un exemple utilisant JQuery.
telecharge eventuellement le Jquery sur ton serveur 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">

var lesOptions2  = new Array('<option value="v3">C</option><option value="v4">D</option>' ,'<option value="v5">E</option><option value="v6">F</option>');
function changer(tag, valeurOption) 
{ 
    switch(valeurOption)
    {
      case "v1":
        $("#"+tag).html(lesOptions2[0]); 
      break;
      case  "v2":
         $("#"+tag).html(lesOptions2[1]); 
      break;
      
      default :break;
    }
} 

</script>
</head>
<body>
  <select id="s1" onchange="changer('s2',this.options[this.selectedIndex].value);">
    <option value="v1">A</option>
    <option value="v2">B</option>
  </select>
  <select id="s2">
  </select>
</body>
</html>
0

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

Posez votre question
Réponse 5 / 8
reaverlost Messages postés 150 Date d'inscription   Statut Membre Dernière intervention   21
 
xamurai --> Merci de ta réponse, seulement ça ne marche pas...

J'ai essayé ça : 

<select name="objet" id="objet" class="normal" >

<select name="hebergement" id="hebergement" class="normal" >


<script language="Javascript" type="text/javascript">
	
			var element = new DynamicOptionList();
			
			element.addDependentFields(document.getElementsByName("objet"), document.getElementsByName("hebergement"));
			
			element.forValue("Afrique du sud").addOptions("Hotel/Guest House classique","Hotel/Guest House supérieur","Hotel/Guest House de luxe");
			element.forValue("Zimbabwe").addOptions("Hotel/Guest House classique","Hotel/Guest House supérieur","Hotel/Guest House de luxe");
						
			element.forValue("Botswana").addOptions("Camping", "Lodge classique", "Lodge supérieur");
			element.forValue("Zambie").addOptions("Camping", "Lodge classique", "Lodge supérieur");
			element.forValue("Namibie").addOptions("Camping", "Lodge classique", "Lodge supérieur");
			
			element.forValue("aucun").setDefaultOptions("--- Sélectionnez un hébergement ---");
			
			element.forValue("Afrique du Sud").setDefaultOptions("Hotel/Guest House Classique");
			element.forValue("Zimbabwe").setDefaultOptions("Hotel/Guest House Classique");
			
			element.forValue("Botswana").setDefaultOptions("Camping");
			element.forValue("Zambie").setDefaultOptions("Camping");
			element.forValue("Namibie").setDefaultOptions("Camping");
	
	</script>


Mais ça ne marche pas... Des suggestions?

Encore merci
0
xamurai Messages postés 223 Date d'inscription   Statut Membre Dernière intervention   15
 
ma version marche regarde http://bunte-autos.de/richo/test1.php

situ veux regarde le code-source, c le même qu'en haut....

ta version est trop compliquée et illisible si tu veux beaucoup programmer
0
Réponse 6 / 8
reaverlost Messages postés 150 Date d'inscription   Statut Membre Dernière intervention   21
 
Bonjour xamurai,

J'ai réessayé ta solution : 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js">
</script>

<script language="Javascript" type="text/javascript">
	
			var lesOptions2  = new Array('<option value="Hotel/Guest House classique">Hotel/Guest House classique</option>	 			<option value="Hotel/Guest House supérieur">Hotel/Guest House supérieur</option>
			<option value="Hotel/Guest House de luxe">Hotel/Guest House de luxe</option>',
			'<option value="Camping">camping</option>
			<option value="Lodge supérieur">camping</option>
			<option value="Lodge supérieur">Lodge supérieur</option>');
			function changer(tag, valeurOption) 
			{ 
				switch(valeurOption)
				{
				  case "Afrique du Sud":
					$("#"+tag).html(lesOptions2[0]);
				  break;
				  
				  case "Zimbabwe":
					$("#"+tag).html(lesOptions2[0]);
				  break;
				  
				  case  "Botswana":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  case  "Zambie":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  case  "Namibie":
					$("#"+tag).html(lesOptions2[1]);

				  break;
				  
				  default :break;
				}
			} 

	</script>
</head>
<body>
<select name="objet" id="objet" class="normal" 
		onchange="changer('hebergement',this.options[this.selectedIndex].value);">

	 <option value="aucun"> --- Sélectionnez une destination --- </option>
	<option value="Afrique du Sud">Afrique du Sud</option>
	<option value="Namibie">Namibie</option>
	<option value="Botswana">Botswana</option>
	<option value="Zimbabwe">Zimbabwe</option>
	<option value="Zambie">Zambie</option>
	</select>

<select name="hebergement" id="hebergement" class="normal" >
			
</select>


Mais rien ne s'affiche dans le deuxième Select. J'ai surement fais une erreur quelque part mais je ne vois pas où...

Merci :)
0
Réponse 7 / 8
reaverlost Messages postés 150 Date d'inscription   Statut Membre Dernière intervention   21
 
xamurai --> Ça marche!!! Merci beaucoup :)

Et je reconnais qu'utiliser jQuery était plus simple.

Bonne journée à toi!
0
xamurai Messages postés 223 Date d'inscription   Statut Membre Dernière intervention   15
 
content de t'avoir aidé.
0
Réponse 8 / 8
nbeland Messages postés 13 Date d'inscription   Statut Membre Dernière intervention   1
 
voici un autre methode :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>


<form name="formulaire" action='bd.php' method='post'>

Numéro:
<input type ='text' size=3 maxlength="3" name= "num1" >
<input type ='text' size=3 maxlength="3" name= "num2" >
<input type ='text' size=4 maxlength="4" name= "num3" >
<br />


Fournisseur : <select name="choix" onchange="test()">
<option>Sélectionnez votre fournisseur</option>
<option>Bell</option>
<option>Télébec</option>
<option>Telus</option>
<option>Videotron</option>
<option>Comwave</option>
<option>ISP télécom</option>
</select>
<select name="choix1">
<option></option>
<option></option>
<option></option>
</select>

<br />


<br><br><input type='submit' value='Ajouter'>

</FORM>


</body></html>

<script type="text/javascript">


function test()
{

if (document.formulaire.choix.selectedIndex==0)
{
document.formulaire.choix1.options[0].innerHTML='';
document.formulaire.choix1.options[1].innerHTML='';
document.formulaire.choix1.options[2].innerHTML='';
}

else if (document.formulaire.choix.selectedIndex==1)
{
document.formulaire.choix1.options[0].innerHTML='Sélectionnez vos options';
document.formulaire.choix1.options[1].innerHTML='Option1';
document.formulaire.choix1.options[2].innerHTML='Option2';
}
else if (document.formulaire.choix.selectedIndex==2)
{
document.formulaire.choix1.options[0].innerHTML='Sélectionnez vos options';
document.formulaire.choix1.options[1].innerHTML='Option3';
document.formulaire.choix1.options[2].innerHTML='Option4';
}

}
</script>
0

Discussions similaires

Aide Please select boot device
Romanitouu -
jee pee -

1 réponse
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Select boot device première utilisation
eleagtte -
bazfile -

7 réponses
Please select boot device
Pauline Emmy -
nadellen -

5 réponses
"Please select a boot device " ? ???
EtienneRMsss -
Malekal_morte- -

1 réponse