Multi select changement sans chargement [Résolu/Fermé]

Signaler
Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
-
Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
-
Bonjour,

Je viens vers vous pour m'aider sur un problème relativement simple et assez connu.
J'ai fait pas mal de recherches mais je ne suis pas tombé précisement sur ce que je souhaite faire.

En fait j'ai un <select> qui permet de choisir une catégorie,
En choisissant cette catégorie je souhaite afficher dans un <select> juste en dessous, les options de cette catégorie, et ce, sans chargement de page.

Ce que j'ai fait:
- j'ai fait un <select> dont la valeur des options correspondent à un identifiant unique de la catégorie
- En dessous j'affiche tout les <select> qui correspondent aux options
- Au chargement les <select> des options ont un "display:none"
- quand on clic sur une catégorie ça devrait mettre le <select> correspondant à display:block;

Mais voilà je n'y arrive pas...

Merci d'avance de vos réponse:
Je vous poste le code que j'ai pour le moment, il s'agit peut être juste d'une erreur de syntaxe...

<select onchange="document.getElementsByName('sect_int').style='display:none;'"> 
<option value="16" onclick="document.getElementById('16').style='display:block;'"> Bureau d'Études </option> 
<option value="3" onclick="document.getElementById('3').style='display:block;'"> Logistique </option> 
</select> 
<br> 
<select id="3" style="display:none;" name="sect_int"> 
<option value="12"> Opérateurs Logistiques caristes </option> 
</select> 
<select id="16" style="display:none;" name="sect_int"> 
<option value="16"> Coordination Projet Industrie Automobile </option> 
<option value="14"> Ingénieur Méthodes Vie Série </option> 
</select>





Quand on veut on peut ! Ou pas ...

6 réponses

Messages postés
5358
Date d'inscription
dimanche 3 février 2008
Statut
Membre
Dernière intervention
13 février 2017
881
la solution a ton problème sans rechargement de la page c'est AJAX, il permet d'appeler le serveur pour une lecture dans une BDD des options de la catégorie choisie liste 1 pour remplir la deuxième liste.

Fais une recherche sur CCM "Ajax listes liées" j'ai déjà aidé sur le sujet

Edit:

voici le lien vers le sujet: https://forums.commentcamarche.net/forum/affich-2382261-ajax-listes-liees
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76687 internautes nous ont dit merci ce mois-ci

Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
19
Up
Bonsoir,
J'aurais pondu un truc plus clair et plus lisible du genre :
<script type="text/javascript">
function showOption() {
	var selection = document.getElementById('Selection').value;
	if(selection == '16') {
		document.getElementById('sect2').style.display='block';
		document.getElementById('sect1').style.display='none';
	} else if(selection == '3') {
		document.getElementById('sect1').style.display='block';
		document.getElementById('sect2').style.display='none';
	}
}
</script>

Et dans la page :
<form method="get" action="">
	<select id="Selection" name="selection" onchange="showOption();">
		<option value="16">Bureau d'Études</option>
		<option value="3">Logistique</option>
	</select><br />

	<select id="sect1" style="display:none;">
		<option value="12">Opérateurs Logistiques caristes</option>
	</select>

	<select id="sect2" style="display:none;">
		<option value="16">Coordination Projet Industrie Automobile</option>
		<option value="14">Ingénieur Méthodes Vie Série </option>
	</select>
</form>
Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
19
Merci pour cette réponse,

Certes le code est beaucoup plus clair de cette manière mais le problème est que tout est géré par Base de Données, donc le nombre de <select> et donc d'identifiants ne sera jamais fixe.

Cordialement
Oui mais si tu postes un sujet et que tu ne dis pas tout, on peut pas deviner non plus! Et ça nous dispenserait de faire 2 fois le même travail... Tourne-toi vers Ajax comme indiqué dans le message plus bas, mais au vu du code javascript que tu as fournit, tu n'es pas sorti d'affaire quand à la compréhension d'Ajax.
Bonne continuation (et efforce-toi d'exposer ton problème dans le détail de A à Z pour obtenir une aide efficace du 1er coup).
Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
19
Ca devrait le faire avec le lien indiqué par Alain_42

Merci beaucoup de votre aide et désolé pour mon premier message, ça m'apprendra à être plus complet dans mes questions ;)

Cordialement
Messages postés
187
Date d'inscription
lundi 11 avril 2011
Statut
Membre
Dernière intervention
23 mars 2015
19
Voilà ça marche parfaitement,

Je me suis servi de ce lien: https://siddh.developpez.com/articles/ajax/#LIV-A

C'est parfait