[Javascript] Problème sur Select...

Résolu/Fermé

reaverlost Messages postés 150 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 14 mai 2018 - 13 janv. 2011 à 14:41
nbeland Messages postés 13 Date d'inscription jeudi 13 janvier 2011 Statut Membre Dernière intervention 19 janvier 2011 - 19 janv. 2011 à 15:21

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.

A voir également:

[Javascript] Problème sur Select...
Telecharger javascript - Télécharger - Langages
Please select boot device ✓ - Forum Windows
Reboot and select proper boot device asus - Forum Matériel & Système
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Please select boot device - Forum Windows 7

8 réponses

Réponse 1 / 8

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
17 janv. 2011 à 11:38

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>

Réponse 2 / 8

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
13 janv. 2011 à 14:55

utilise du javascript

Réponse 3 / 8

reaverlost Messages postés 150 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 14 mai 2018 21
13 janv. 2011 à 15:02

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.

Réponse 4 / 8

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
13 janv. 2011 à 15:29

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>

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 jeudi 27 mai 2010 Statut Membre Dernière intervention 14 mai 2018 21
14 janv. 2011 à 17:28

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

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
Modifié par xamurai le 14/01/2011 à 18:28

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

Réponse 6 / 8

reaverlost Messages postés 150 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 14 mai 2018 21
17 janv. 2011 à 10:31

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 :)

Réponse 7 / 8

reaverlost Messages postés 150 Date d'inscription jeudi 27 mai 2010 Statut Membre Dernière intervention 14 mai 2018 21
17 janv. 2011 à 11:50

xamurai --> Ça marche!!! Merci beaucoup :)

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

Bonne journée à toi!

xamurai Messages postés 223 Date d'inscription mardi 11 janvier 2011 Statut Membre Dernière intervention 19 février 2013 15
17 janv. 2011 à 15:13

content de t'avoir aidé.

Réponse 8 / 8

nbeland Messages postés 13 Date d'inscription jeudi 13 janvier 2011 Statut Membre Dernière intervention 19 janvier 2011 1
19 janv. 2011 à 15:21

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>

Discussions similaires

Aide Please select boot device

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

"Please select a boot device " ? ???

Please select boot device