Multi select changement sans chargement

Résolu/Fermé

DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 - Modifié par DoulyCreations le 20/09/2011 à 09:28
DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 - 21 sept. 2011 à 15:50

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 ...

A voir également:

Multi select changement sans chargement
Changement dns - Guide
Changement d'écriture - Guide
Reboot and select proper boot device - Forum Windows
Multi exp pokemon diamant ✓ - Forum Jeux vidéo
Changement carte graphique - Guide

6 réponses

Réponse 1 / 6

Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
Modifié par Alain_42 le 21/09/2011 à 11:22

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

Réponse 2 / 6

DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
20 sept. 2011 à 14:06

Réponse 3 / 6

__construct
20 sept. 2011 à 20:48

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>

Réponse 4 / 6

DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
21 sept. 2011 à 09:36

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

__construct
21 sept. 2011 à 09:44

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

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

Posez votre question

Réponse 5 / 6

DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
21 sept. 2011 à 14:52

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

Réponse 6 / 6

DoulyCreations Messages postés 187 Date d'inscription lundi 11 avril 2011 Statut Membre Dernière intervention 23 mars 2015 19
21 sept. 2011 à 15:50

Voilà ça marche parfaitement,

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

C'est parfait

Discussions similaires

Recherche multi exp dans pokémon heart gold

Aide Please select boot device

2eme multi exp?

Pokémon SoulSilver multi exp

Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre