Multi select changement sans chargement

Résolu

DoulyCreations Messages postés 187 Date d'inscription Statut Membre Dernière intervention -
DoulyCreations Messages postés 187 Date d'inscription Statut Membre Dernière intervention - 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 ...

Afficher la suite

A voir également:

Multi select changement sans chargement
Changement dns - Guide
Changement d'écriture facebook - Guide
Changement d'heure - Guide
Youtube multi downloader - Télécharger - Conversion & Codecs
Changement clavier azerty - Guide

6 réponses

Réponse 1 / 6

Alain_42 Messages postés 5361 Date d'inscription Statut Membre Dernière intervention 894

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 Statut Membre Dernière intervention 19

Réponse 3 / 6

__construct

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 Statut Membre Dernière intervention 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

__construct

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 Statut Membre Dernière intervention 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

Réponse 6 / 6

DoulyCreations Messages postés 187 Date d'inscription Statut Membre Dernière intervention 19

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

Pokémon SoulSilver multi exp

2eme multi exp?

Votre réponse

Discussions similaires