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 . :)
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();
}
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:
inputOnCheckShowHide()
, qui prend trois paramètres :
id
qui va nous servir pour pour DRYer le code (simple document.getElementById(id)
).Si tu comprends pas un truc, si j'ai mal expliqué, etc, hésite pas. :)
Ben écoute ca a l'air de marcher tout sa ,je teste tous sa demain et je te dis quoi , Sympa de ta part ;)
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é.
les radios sont fait pour n'avoir qu'un élément de selectionné. Tu voudrais donc des checkbox ?
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.