Liste déroulante
puma67000
Messages postés
179
Statut
Membre
-
puma67000 Messages postés 179 Statut Membre -
puma67000 Messages postés 179 Statut Membre -
Bonjour,
voila sur ce mon site web je voudrai intégrer une liste déroulante de ce type là
http://www.oscaro.com/Default.asp?Reset=true
ce que je voudrai faire sur mon site www.pumaworld.fr une section Argus pour la Puma. donc le visiteur choisi un modèle puis le second menu apparait etc.. une fois tous les champs renseigner l'information apparait d'elle même sur la même page.
comment peux t on faire cela?
je sais faire une liste déroulante de base mais pas comme celle la
voila sur ce mon site web je voudrai intégrer une liste déroulante de ce type là
http://www.oscaro.com/Default.asp?Reset=true
ce que je voudrai faire sur mon site www.pumaworld.fr une section Argus pour la Puma. donc le visiteur choisi un modèle puis le second menu apparait etc.. une fois tous les champs renseigner l'information apparait d'elle même sur la même page.
comment peux t on faire cela?
je sais faire une liste déroulante de base mais pas comme celle la
A voir également:
- Liste déroulante
- Liste déroulante excel - Guide
- Liste déroulante en cascade - Guide
- Liste code ascii - Guide
- Liste déroulante google sheet - Accueil - Guide bureautique
- Site dangereux liste - Guide
14 réponses
Il faut utiliser de l'AJAX ou du javascript pur (sachant que cette deuxième solution est lourde, demande beaucoup de code et n'est pas évolutive).
qu'est ce que tu entends par "pas evolutivf"?
je connais strictement rien en Ajax (kézako)
je connais strictement rien en Ajax (kézako)
eh bien si tu codes en javascript ce sera assez compliqué à mettre en place avec beaucoup de code donc des difficultés dès que des modifs devront être faites
Exemple : http://www.thelin.net/laurent/labo/js/listesderoulantes.html
c'est un des exemples les plus simples possibles, sans base de données et pourtant ça fait déjà pas mal de code
L'AJAX permet de faire des modification côté client en récupérant des données côté serveur.
Tout est expliqué ici :
https://www.xul.fr/xml-ajax.html
Exemple : http://www.thelin.net/laurent/labo/js/listesderoulantes.html
c'est un des exemples les plus simples possibles, sans base de données et pourtant ça fait déjà pas mal de code
L'AJAX permet de faire des modification côté client en récupérant des données côté serveur.
Tout est expliqué ici :
https://www.xul.fr/xml-ajax.html
bon j'ai totalement changer de direction par contre je voudrai faire quelque chose de plus simple, faire apparaitre un div lorsqu'on active un select.
j'ai vu un tuto mais il ne permet pas d'afficher un div différent en fonction du select.
exemple
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst)
{
var d=document.getElementById("toto");
if ( lst.selectedIndex==1)
d.style.display="block";
else
d.style.display="none";
}
</Script>
</HEAD>
<BODY>
<div id="toto">titi</div><br />
<select onchange="tata(this);">
<option>cacher 1</option>
<option>montrer</option>
<option>cacher 2</option>
</select>
</BODY></HTML>
j'ai essayer de manipuler dans tout les sens mais j'arrive pas a attribuer un text à chaque option.
quelqu'un pourrai m'aider?
j'ai vu un tuto mais il ne permet pas d'afficher un div différent en fonction du select.
exemple
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst)
{
var d=document.getElementById("toto");
if ( lst.selectedIndex==1)
d.style.display="block";
else
d.style.display="none";
}
</Script>
</HEAD>
<BODY>
<div id="toto">titi</div><br />
<select onchange="tata(this);">
<option>cacher 1</option>
<option>montrer</option>
<option>cacher 2</option>
</select>
</BODY></HTML>
j'ai essayer de manipuler dans tout les sens mais j'arrive pas a attribuer un text à chaque option.
quelqu'un pourrai m'aider?
exemple si vous avez un div iid="tutu" en plus et cette liste
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
est ce que le script est bon?
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst)
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
car cela n'abouti à rien, je voudrai que le visiteur clic sur un des moteur que je vais proposer (1.4l, 1.6l, 1.7l)
une fois que le choix est fais un div s'ouvre plus bas avec les infos que j'aurai edité.
cette liste ne fonctionne pas comme je voudrai et je ne trouve pas de tuto qui aboutirai à quelque chose de similaire.
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst)
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
car cela n'abouti à rien, je voudrai que le visiteur clic sur un des moteur que je vais proposer (1.4l, 1.6l, 1.7l)
une fois que le choix est fais un div s'ouvre plus bas avec les infos que j'aurai edité.
cette liste ne fonctionne pas comme je voudrai et je ne trouve pas de tuto qui aboutirai à quelque chose de similaire.
Il manque le {
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
vous voulez édité le div à afficher comment?
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
vous voulez édité le div à afficher comment?
Il faut bien sûr ajouter les select en dessous et cela donne :
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
</HEAD>
<BODY>
<div id="toto">titi</div><br />
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
</BODY></HTML>
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
</HEAD>
<BODY>
<div id="toto">titi</div><br />
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
</BODY></HTML>
ok merci mais le "titi" est le seul texte dispo c'est que je voudrai qu'il change en fonction du choix selectionné
oui c'est cela dans le select le visiteur choisi tutu, dans le div apparaitra un texte parlant des tutu (par exemple)
s'il choisi toto dans le select dans le div apparaitra des blagues (par exemple).
je voudarai qu'en fonction du choix du visiteur le div correspondant au choix apparaisse.
s'il choisi toto dans le select dans le div apparaitra des blagues (par exemple).
je voudarai qu'en fonction du choix du visiteur le div correspondant au choix apparaisse.
<HTML Lang="fr">
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
</HEAD>
<BODY>
<div id="toto" style="display:none;">Blagues de toto</div><br />
<div id="tutu" style="display:none;"> Les tutu sont des jupons de danseurs...</div><br/>
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
</BODY></HTML>
<HEAD>
<TITLE></TITLE>
<Script type="Text/JavaScript">
function tata(lst) {
var d=document.getElementById("toto");
var d2=document.getElementById("tutu");
switch ( lst.selectedIndex)
case 1 :
d.style.display="block";
break;
case 2 :
d.style.display="none";
break;
case 3 :
d2.style.display="block";
break;
case 4 :
d2.style.display="none";
break;
}
</Script>
</HEAD>
<BODY>
<div id="toto" style="display:none;">Blagues de toto</div><br />
<div id="tutu" style="display:none;"> Les tutu sont des jupons de danseurs...</div><br/>
<select onchange="tata(this);">
<option>montrer toto</option>
<option>cacher toto</option>
<option>montrer tutu</option>
<option>cacher tutu</option>
</select>
</BODY></HTML>
re bonjour
merci encore pour m'avoir aider sur mon site, par contre je voudrai savoir si ^je peux réutiliser la liste précédente pour ajouter un autre select?
j'ai réussi à faire en sortes de pouvoir faire apparaitre une nouvelle liste quand le choix 1 a été sélectionné. par contre une fois le choix 2 sémectionné il n'y a rien qui apparais.
voici le code.
<script language="javascript">
function changementType() {
var type = document.getElementById("type").value;
if (type == "1997") {
document.getElementById("1997").style.display="block";
} else{
document.getElementById("1997").style.display="none";
}
if (type == "1998"){
document.getElementById("1998").style.display="block";
}else{
document.getElementById("1998").style.display="none";
}
if (type == "1999"){
document.getElementById("1999").style.display="block";
}else{
document.getElementById("1999").style.display="none";
}
if (type == "2000"){
document.getElementById("2000").style.display="block";
}else{
document.getElementById("2000").style.display="none";
}
if (type == "2001"){
document.getElementById("2001").style.display="block";
}else{
document.getElementById("2001").style.display="none";
}
if (type == "2002"){
document.getElementById("2002").style.display="block";
}else{
document.getElementById("2002").style.display="none";
}
if (type == "1.4l"){
document.getElementById("1.4l").style.display="block";
}else{
document.getElementById("1.4l").style.display="none";
}
if (type == "1.6l"){
document.getElementById("1.6l").style.display="block";
}else{
document.getElementById("1.6l").style.display="none";
}
if (type == "1.7l"){
document.getElementById("1.7l").style.display="block";
}else{
document.getElementById("1.7l").style.display="none";
}
}
</script>
</head>
<body>
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
<div id ="1.6l" style="display:none;">lol</div>
<div id ="1.7l" style="display:none;">dki</div>
aurai mal inscrot quelque chose?
merci encore pour m'avoir aider sur mon site, par contre je voudrai savoir si ^je peux réutiliser la liste précédente pour ajouter un autre select?
j'ai réussi à faire en sortes de pouvoir faire apparaitre une nouvelle liste quand le choix 1 a été sélectionné. par contre une fois le choix 2 sémectionné il n'y a rien qui apparais.
voici le code.
<script language="javascript">
function changementType() {
var type = document.getElementById("type").value;
if (type == "1997") {
document.getElementById("1997").style.display="block";
} else{
document.getElementById("1997").style.display="none";
}
if (type == "1998"){
document.getElementById("1998").style.display="block";
}else{
document.getElementById("1998").style.display="none";
}
if (type == "1999"){
document.getElementById("1999").style.display="block";
}else{
document.getElementById("1999").style.display="none";
}
if (type == "2000"){
document.getElementById("2000").style.display="block";
}else{
document.getElementById("2000").style.display="none";
}
if (type == "2001"){
document.getElementById("2001").style.display="block";
}else{
document.getElementById("2001").style.display="none";
}
if (type == "2002"){
document.getElementById("2002").style.display="block";
}else{
document.getElementById("2002").style.display="none";
}
if (type == "1.4l"){
document.getElementById("1.4l").style.display="block";
}else{
document.getElementById("1.4l").style.display="none";
}
if (type == "1.6l"){
document.getElementById("1.6l").style.display="block";
}else{
document.getElementById("1.6l").style.display="none";
}
if (type == "1.7l"){
document.getElementById("1.7l").style.display="block";
}else{
document.getElementById("1.7l").style.display="none";
}
}
</script>
</head>
<body>
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
<div id ="1.6l" style="display:none;">lol</div>
<div id ="1.7l" style="display:none;">dki</div>
aurai mal inscrot quelque chose?
voici une trame de ce que je souhaite faire
choix 1 => 1997 (ex) le choix 2 apparait
choix 2 => 1.7l (ex) un texte apparait
mon choix 1 est
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
la je pense avoir juste. et pour le choix 2 j'ai
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
la tout fonctionne, j'ai ensuite essayer d'appliquer vos conseils avec la création de div
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
<div id ="1.6l" style="display:none;">lol</div>
<div id ="1.7l" style="display:none;">dki</div>
je vois pas ou j'ai fais apparaitre 1998. est ce que mon <div id="1.4l"..... est faux?
choix 1 => 1997 (ex) le choix 2 apparait
choix 2 => 1.7l (ex) un texte apparait
mon choix 1 est
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
la je pense avoir juste. et pour le choix 2 j'ai
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
la tout fonctionne, j'ai ensuite essayer d'appliquer vos conseils avec la création de div
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
<div id ="1.6l" style="display:none;">lol</div>
<div id ="1.7l" style="display:none;">dki</div>
je vois pas ou j'ai fais apparaitre 1998. est ce que mon <div id="1.4l"..... est faux?
si vous sélectionnez n'importe quel élément de cette liste :
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
alors cette liste apparaît :
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
et si vous choisissez un des ces éléments, un texte apparaît?
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
alors cette liste apparaît :
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
et si vous choisissez un des ces éléments, un texte apparaît?
<select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
non pour le moment j'ai créer qu'une nouvelle liste, si vous cliqué sur 1997 cette liste apparait
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
si vous cliqué sur 1998 ou 2000 (par ex), il se passe rien, normal j'ai pas encore attribuer de nouvelle liste.
mon problème viens du choix de cette liste
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
si je choisi 1.4 (par ex) je voudrai faire apparaitre ça
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
mais ça marche pas..
<option value="Unique">Choix de l'année</option>
<option value="1997">Puma 1997</option>
<option value="1998">Puma 1998</option>
<option value="1999">Puma 1999</option>
<option value="2000">Puma 2000</option>
<option value="2001">Puma 2001</option>
<option value="2002">Puma 2002</option>
</select><br/>
non pour le moment j'ai créer qu'une nouvelle liste, si vous cliqué sur 1997 cette liste apparait
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
si vous cliqué sur 1998 ou 2000 (par ex), il se passe rien, normal j'ai pas encore attribuer de nouvelle liste.
mon problème viens du choix de cette liste
<div id ="1997" style="display:none;"> <select name="type" id="type" onchange="changementType();">
<option value="Unique">Choix de l'année</option>
<option value="1.4l">1.4l</option>
<option value="1.6l">1.6l</option>
<option value="1.7l">1.7l</option>
</select></div>
si je choisi 1.4 (par ex) je voudrai faire apparaitre ça
<div id ="1.4l" style="display:none;">hJB MMUOGU eu</div>
mais ça marche pas..
C'est normal car vous avez mis le même identifiant et le même nom pour vos deux select.
Un identifiant doit être UNIQUE!
et il vaut mieux que le nom aussi.
Conseil en plus : lorsque vous testez différentes valeurs d'une même variable, utilisez un switch :
switch(type) {
case "1997" :
document.getElement....
break;
case "1998" :
break;
}
Un identifiant doit être UNIQUE!
et il vaut mieux que le nom aussi.
Conseil en plus : lorsque vous testez différentes valeurs d'une même variable, utilisez un switch :
switch(type) {
case "1997" :
document.getElement....
break;
case "1998" :
break;
}
