Bonjour a tous ,voici mon problème:

J'aimerais créer un formulaire qui lorsque je coche une case sur un checkbox affiche une liste déroulante : Dans mon cas j'ai des batiments ,dans mon formulaire le client a un checkbox ou il choisi les batiments sur lequelles il sera affecter et si il coche le batiment 1 , je voudrais que la liste des bureaux du batiment 1 apparait , comment dois je m'y prendre .
Merci d'avance a ceux qui prendront le temps de m'aider . :)

12 réponses


Je pense que le plus simple serais de cacher les éléments du formulaire, et de les faire appparaitre lorsque la personne coche la case correspondante ( en jquery )

$(".caseAcocher").on("click",function(event){
    $(".machin").show();
    $(".autresmachins").hide();
 }
yoowman
Auteur

Le problème est que je ne sais pas faire de jQuery ,j'ai vu quelques codes ces tout ,je suis vraiment débutant.
Je vais essayer deme former un peu en jQuery et j'espere que ton code me sera utile ,maintenant si tu le sais faire sous symfony je suis pas contre :)

Arrêtez un peu avec jQuery, toujours à l'ajouter à un projet pour des tout petits trucs... :p

Bon, j'avoue, mon code est plus long, mais c'est un exemple concret... jsfiddle ici

Je n'ai pas commenté mon code, mais je vais l'expliquer ici:

  • Pour l'HTML, on a un formulaire avec 2 radios (male + female est ce qui m'est venu à la tête) et deux selects. Quand on va selectionner le premier radio, le premier select sera visible, inversement quand on selectionne le 2ème radio.
  • Pour le Javascript, on déclare la fonction inputOnCheckShowHide(), qui prend trois paramètres :
    • input : l'objet qui va être observé ;
    • show : un array d'arrays qui contiennent 1, l'objet que l'on veut afficher, 2, le display que l'on veut lui donner (si pas donné, 'block') ;
    • hide : un array contenant les objets à cacher.
  • On déclare ensuite la fonction id qui va nous servir pour pour DRYer le code (simple document.getElementById(id)).
  • Ensuite, on appelle notre fonction deux fois : une fois pour chaque radio.
  • Le css contient juste une déclaration pour cacher de base le second select.

Si tu comprends pas un truc, si j'ai mal expliqué, etc, hésite pas. :)

yoowman
Auteur

Ben écoute ca a l'air de marcher tout sa ,je teste tous sa demain et je te dis quoi , Sympa de ta part ;)

yoowman
Auteur

Le problème est que le client peut choisir plusieurs batiments soit pour ton exemple male et female

Ce n'est pas le comportement que tu veux ? Je croyais que tu voulais qu'un select change selon le radio qui est selectionné.

yoowman
Auteur

Oui ces sa que je veux mais enfaite il peut y avoir plusieurs radios selectionné.

les radios sont fait pour n'avoir qu'un élément de selectionné. Tu voudrais donc des checkbox ?

yoowman
Auteur

Dans ce cas la ,oui ce serait des checkbox :)

ça serais pas plus simple en jquery ? ;-)

Donne nous un exemple. :)

Ok défie relevé! :)

Bon pour le principe on va créer trois listes et leurs attribuer un id à chaqu'une (et biensur une checkbox avec aussi un id).
les id, si j'ai bien tous compris sa permet a jquery de retrouver plus vite les elements , enfin surtout d'utiliser moins de ressources...

<ul id="batiments">
    <li>bat1</li>
    <li>bat2</li>
    <li>bat3</li>
</ul>

<ul id="bat1">
    <li>itemA</li>
    <li>itemB</li>
    <li>itemC</li>
</ul>

<ul id="bat2">
    <li>itemD</li>
    <li>itemE</li>
    <li>itemF</li>
</ul>

<input type="checkbox" id="case" value="">

Ensuite avec les css on va "cacher" les listes avec un ul{display:none}
jusque la tous va bien...

Et PAN un petit coup de jquery et c bon:

$(document).ready(function(){
    $("#case").on("change",function(event){
        $("#batiments").slideToggle();
    });
    $("#batiments").on("click","li",function(event){
      $target = $(event.currentTarget);
      var targetText = $target.text();
      $("#bat1, #bat2").slideUp();
      $("#"+targetText).slideDown();
    });
}

Voila, il y moyen de faire ça en bcp plus "propre" et réutilisable mais bon l'idée y est.