Cases à cocher qui dépendent d'une liste déroulante

Par Hollow_6, il y a 9 ans


Bonjour à tous,

Je souhaiterais que dans mon formulaire un bloc de cases à cocher différent s'affiche selon un élément sélectionné dans une liste déroulante.
Et si possible que ça se fasse sans rechargement de page.
Quelqu'un aurait-il un script tout fait à me proposer ?
D'avance merci.

Six.

14 réponses

Kaelyscius, il y a 9 ans

Je dis pas le contraire ^^ Et c'est pas une critique ! :D Seulement dans ce cas la, il s'est trompé de section du forum, ce qu'il demande peut être fait en javascript seulement. Il n'y a pas besoin de traitement par le serveur ;)

Kaelyscius, il y a 9 ans

Ce que tu cherche à faire est du javascript.
Un hide/show de tes éléments sur un change en fonction de ta liste déroulante fera l'affaire.

Sinon on est pas la pour coder pour toi ^^ mais avec ces pistes tu devrais être capable de le faire rapidement :)

betaWeb, il y a 9 ans

Salut,

Nous sommes là pour aider, pas pour donner des scripts tout fait.
Il te faut, lors de la sélection d'un élément de ta liste, afficher un groupe de checkbox wrappées, par ex., par une div ayant un attribut particulier, attribut que tu pourras mettre en value de l'élément de ta liste.

HTML :

<select id="mySelect"> <option value="value_1">#1</option> <option value="value_2">#2</option> <option value="value_3">#3</option> </select> <div data-js="list_value_1" class="is-hidden"> <input type="checkbox" value="1" name="myCheckbox"> <input type="checkbox" value="1" name="myCheckbox"> </div> <div data-js="list_value_2" class="is-hidden"> <input type="checkbox" value="1" name="myCheckbox"> <input type="checkbox" value="1" name="myCheckbox"> <input type="checkbox" value="1" name="myCheckbox"> </div> <div data-js="list_value_3" class="is-hidden"> <input type="checkbox" value="1" name="myCheckbox"> <input type="checkbox" value="1" name="myCheckbox"> <input type="checkbox" value="1" name="myCheckbox"> </div>

CSS :

.is-hidden { display: none !important; }

JS (avec jQuery pour se faciliter la vie) :

$("#mySelect").on('change', function (e) { e.preventDefault(); var value = $(this).val(); if (!value || !value.length) { return; } $('[data-js^="list_value_"]').addClass('is-hidden'); $('[data-js="' + value + '"]').removeClass('is-hidden'); });

A toi d'adapter ceci selon tes besoins.

Kaelyscius, il y a 9 ans

Tu es bien gentil @betaWeb. ^^ Tu lui as maché le travail la quand même :) ça va pas l'aider à progresser. Même si j'ai été très succinct, il aurait pu trouver avec un peu de recherche quand même.

cid5420, il y a 9 ans

@betaWeb
"Nous sommes là pour aider, pas pour donner des scripts tout fait"
euhhh tu lui as pas balancé un script ?

Ce que j'ai donné correspond également à ce qui est demandé, enfin avec le peut d'info (étant donnée qu'on se trouve dans la section php)

Kaelyscius, il y a 9 ans

En réalité cid5420 , tu réponds pas vraiment à la problématique ici. Ce que cherche à faire Hollow est ce que @betaWeb a posté.

cid5420, il y a 9 ans

bah ouai c'est sûr avec mon code il faut chercher un peut ! Avec un peut de modif j'obtiens la même chose sans forcer

betaWeb, il y a 9 ans

@cid5420, @Kaelyscius Oui je comprends que j'ai pu lui mâcher un peu le travail, alors même que je lui ai dit qu'on est pas là pour lui fournir des scripts tout fait.
Après, je lui ai donné une piste, que j'ai préféré etayer par un exemple afin d'éviter des palabres inutiles. Et puis on m'a déjà repproché d'être trop sec, donc j'essaye de me montrer pédagogue :)
Ma remarque n'en demeure pas moins vraie : ce forum a pour but l'entre-aide, nous ne sommes pas là pour pondre des scripts à la demande ^^

Kaelyscius, il y a 9 ans

@betaWeb Roh ! Toi trop sec? :-p C'est bien d'améliorer sa pédagogie ! Il faut progresser chaque jour dans un domaine ^^ Mais la quand même tu lui a sacrément maché le boulot ! :p

betaWeb, il y a 9 ans

@Kaelyscius J'avoue ^^
J'espère au moins que ça l'aura aidé.
Mais si vous insistez, je veux bien supprimer mon post :-p

Kaelyscius, il y a 9 ans

Non c'est bon t'en fais pas ! ;-) Mais la prochaine fois ! On t'attends à la sortie ! Et tu vas voir ! :p

betaWeb, il y a 9 ans

@Kaelyscius Quoi qu'il en soit, aucune réponse du demandeur pour le moment..

Kaelyscius, il y a 9 ans

J'espère au moins qu'il te remerciera ! xD