Interaction entre deux balises select

[TYBMHI]

Bonjour à tous,

J'ai créé 1 select :

<select name="categorie" id="type" class="type">
<option value="Montagne">Montagne</option>
<option value="Mer">Mer</option>
<option value="Campagne">Campagne</option>
</select>

J'aimerais créer un second select qui interagirait avec le premier. Par exemple si l'internaute choisis "montagne" dans le premier select, j'aimerais que le second soit du style :

<select name="sous-categorie" id="sous-rubrique" class="sous-rubrique">
<option value="Alpes">Alpes</option>
<option value="Jura">Jura</option>
<option value="Vosges">Vosges</option>
</select>

ou s'il choisit Mer :

<select name="sous-categorie" id="sous-rubrique" class="sous-rubrique">
<option value="Mediterrannée">Mediterrannée</option>
<option value="Océans">Océan</option>
<option value="Plage">Plages</option>
</select>

et ainsi de suite...

Merci d'avance pour votre aide

Modifié 5 Avril 2009 par TYBMHI

[Dudu]

Mais tu parles en quel langage ?

Je pose la question car tu postes dans "Asp, Java, Cfm, autres." et que je ne vois pas à quel langage parmi ceux-là tu te réfères

[TYBMHI]

Vu l'heure à laquelle j'ai posté ce message, je me suis trompé. Je pense que le language à adapté serait Javascript ou peut-être PHP

[philippe69]

Tu te rends bien compte que ce que tu demandes c'est loin d'être simple !!! Je tente une ébauche de code.

tu mets un "onchange" sur ton id "type" qui va vers le javascript suivant :

function OnMySelectChange(el) {

if( $$('#type').value == 'Montagne' ) {

$A($$('#sous-rubrique' +' input'))[0].value = 'Alpes';

$A($$('#sous-rubrique' +' input'))[1].value = 'Jura';

$A($$('#sous-rubrique' +' input'))[2].value = 'Vosges';

}

if( $$('#type').value == 'Mer' ) {

...

}

}

Tu inclus le framework prototype.js pour éviter les getelementbyid..style.name trop pénibles à utilise. Il te servira pour plein de chose si tu développes en js http://www.prototypejs.org/

Quand tu maîtriseras prototype tu pourras facilement remplacer

$A($$('#sous-rubrique' +' input'))[0].value = 'Alpes';

par de l'Ajax

$A($$('#sous-rubrique' +' input'))[0].value = new Ajax.Request('/ton/url', {...

[dotweb]

Hello,

Tu peux faire ceci

<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#s1").change(function(){
			$.post("test.php", { value: $(this).val() },function(data){
				 $("#s2").empty();
				 $("#s3").empty();
				 $("#s2").prepend(data);
			});
		});
		$("#s2").change(function(){
			$.post("test.php", { value: $(this).val() },function(data){
				 $("#s3").empty();
				 $("#s3").prepend(data);
			});
		});
	});
</script>
<select id="s1">
	<option>v1</option>
	<option>v2</option>
</select>
<select id="s2">
	<option>v1</option>
	<option>v2</option>
</select>
<select id="s3">
	<option>v1</option>
	<option>v2</option>
</select>

puis dans ta page test.php tu récupères la variable "value" passée en post via $_POST["value"] puis tu fais ton traitement php pour rechercher les correspondances.

C'est très sommaire mais ça te permettra d'avancer.

Mon jq.js correspond à jQuery.