Case à cocher et liste déroulante

Fermé

liloo - 17 avril 2009 à 14:25
liloo - 20 avril 2009 à 15:17

Bonjour,

Voilà, j'ai réalisé une liste à checkbox (4 choix) qui propose des types d'hébergements:

- locations de vacances
- locations mensuelles
- ventes immobilières
- hotels-campings

...et une liste déroulante en dessous qui affichera le type de biens en fonction du choix qui aura été fait.

Par exemple, si je coche la case "locations de vacances" dans le menu déroulant j'aurais "appartement", "maison"...tandis que si je clique sur "hotels-camping" j'aurais "mobil home", "chambre d'hotels"...

Comme vous l'avez peut-être déjà compris, ce que je souhaiterais, c'est que, lorsqu'une case est cochée, la liste déroulante en dessous affiche les options (autrement dit les types de biens) propres à cette case, sachant en plus que les données concernant les types de biens sont à aller chercher dans une base de données.

Pouvez-vous m'expliquer juste comment procéder, j'ai quelques notions des javascript, php, et sql mais pas assez pour me dépatouiller de ce problème.

Merci à l'avance pour vos réponses ^^

A voir également:

Case à cocher et liste déroulante
Liste déroulante excel - Guide
Liste déroulante en cascade - Guide
Supprimer liste déroulante excel - Forum Excel
Google sheet liste déroulante - Accueil - Guide bureautique
Effacer liste déroulante - Forum Réseaux sociaux

3 réponses

Réponse 1 / 3

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
17 avril 2009 à 15:24

bonjour

voila un petit exemple de ce que tu veux

		<script>
		function list(liste,y){

var phrase = liste;
var vecteur = phrase.split(";");
var text = "<select>";
for (i = 0; i<y; i++){
text+='<option value='+vecteur[i]+'>'+vecteur[i]+'</option>';

}
text+="</select>"
document.getElementById(5).innerHTML = text;

}
function disable(y){

for (var i=1; i<=4; i++) {
if (i!=y){
document.getElementById(i).checked=false;
}
}
}

		</script>


		<input type="checkbox" onclick="list('appart;maison;tente;camping',4);disable(1);" id="1">- locations de vacances
		<input type="checkbox" onclick="list('appart;maison',2);disable(2);" id="2">- locations mensuelles
		<input type="checkbox" onclick="list('appart;maison;villa;chalet',4);disable(3);" id="3">- ventes immobilières
		<input type="checkbox" onclick="list('chambre;chalet;caravane;tente;camping',5);disable(4);" id="4">- hotels-campings 
		
		
		<div id="5"></div>

il ne te reste plus qu'a remplacer les liste de type de logement en les separant bien par un point virgule ; :)

Adns

liloo
17 avril 2009 à 16:34

Merci beaucoup adns tu m'as enlevé une grosse épine du pied ! ^^

Bon je m'y remets... à mon avis je ne suis pas au bout de mes surprises! Merci ;)

Réponse 2 / 3

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
20 avril 2009 à 10:20

De rien pense au sujet resolu ;);)

Adns

liloo
20 avril 2009 à 10:37

hihi je revien en force! juste une petite kestion adns (avant de mettre sujet résolu^^); dans le code que tu m'as donné comment tu peut aligner ta liste déroulante qui apparaît avec la liste à checkbox pour que ça soit plus esthétik ? ? ? Merci!!

Je remets le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="index.css" rel="stylesheet" type="text/css" />

<title>Document sans nom</title>
<script>
function list(liste,y){

var phrase = liste;
var vecteur = phrase.split(";");
var text = "<select>";
for (i = 0; i<y; i++){
text+='<option value='+vecteur[i]+'>'+vecteur[i]+'</option>';

}
text+="</select>"
document.getElementById(5).innerHTML = text;

}
function disable(y){

for (var i=1; i<=4; i++) {
if (i!=y){
document.getElementById(i).checked=false;
}
}
}

</script>

</head>
<body bgcolor="#000000">

<div id="check">
<ul>
<li class="intitule">Choisissez un type d'hébergement</li><br />
<li class="choix"><input type="checkbox" onclick="list('Appartement;Maison;Terrain;Local comercial',4);disable(1);" id="1">Locations saisonnières</li>
<li class="choix"><input type="checkbox" onclick="list('Appartement;Maison',2);disable(2);" id="2">Locations mensuelles</li>
<li class="choix"><input type="checkbox" onclick="list('Appartement;Maison;Terrain;Local commercial',4);disable(3);" id="3">Ventes immobilières</li>
<li class="choix"><input type="checkbox" onclick="list('Mobil home;emplacement;caravane;gîte;hôtel',5);disable(4);" id="4">Hôtels-Campings</li>
</ul>

<div id="5"></div>

</div>

</body>
</html>

liloo > liloo
20 avril 2009 à 10:56

ah vi je voulais également savoir comment faire pour que quand on décoche une case la liste déroulante disparaisse

pour l'instt kan je coche sur une case elle apparait mais kan je décoche elle reste..

Merci ^^ ..de nouveau..

Réponse 3 / 3

adns Messages postés 1094 Date d'inscription vendredi 23 février 2007 Statut Membre Dernière intervention 27 mars 2012 153
20 avril 2009 à 15:12

reuh

voila pour ce qui est de les mettre en face par contre pour l'enlever désolé par reussi...

		<script>
		function list(liste,y,j){
var decale = (j-1)*210;
if (y == 1)
margin = "";
else
margin = "style=margin-left:"+decale+"px";

var phrase = liste;
var vecteur = phrase.split(";");
var text = "<select "+margin+">";
for (i = 0; i<y; i++){
text+='<option value='+vecteur[i]+'>'+vecteur[i]+'</option>';

}
text+="</select>"


document.getElementById(5).innerHTML = text;

}
function disable(y){

for (var i=1; i<=4; i++) {
if (i!=y){
document.getElementById(i).checked=false;
}
}
}



		</script>
<table>
<tr>
<td width = "200px" ><input type="checkbox" onclick="list('appart;maison;tente;camping',4,1);disable(1);" id="1">- locations de vacances</td>
<td width = "200px" ><input type="checkbox" onclick="list('appart;maison',2,2);disable(2);" id="2">- locations mensuelles</td>
<td width = "200px" ><input type="checkbox" onclick="list('appart;maison;villa;chalet',4,3);disable(3);" id="3">- ventes immobilières</td>
<td width = "200px" ><input type="checkbox" onclick="list('chambre;chalet;caravane;tente;camping',5,4);disable(4);" id="4">- hotels-campings </td>
</tr>
</table>		
		
		<div id="5"></div>

Adns

liloo
20 avril 2009 à 15:17

Merci!!!

C'est pas grave c'est déjà très bien ^^

Mon problème est résolu!

Discussions similaires

Bouton case à cocher grisé

URGENT - codes ALT + ???

Suppression listes déroulantes

Excel, agrandir les cases a cocher

Supprimer liste déroulante Excel