[HTML/JS]Mise a jour d'une image apres un choix dans une liste

Marsh Posté le 09-09-2006 à 11:03:25

Bonjour a tous

J'aurais besoin d'aide pour un petit truc.
voila, dans un formulaire, j'ai une liste deroulante avec plusieurs option, liste avec un banal <select><option value=...></select>

ce que j'aimerais faire, c'est que des que je fait un choix dans ma liste, qu'une image se mette a jour toute seul dans la meme page.
j'ai vu en JS une chose qui s'appelle OnChange, ca me paraissait une bonne idée, mais comment recuperer la valeur de l'option choisie en JS ?

donc si vous avez une idée sur la chose, merci de votre aide.

Message cité 1 fois

Reply

Marsh Posté le 09-09-2006 à 11:03:25

Reply

Marsh Posté le 09-09-2006 à 11:13:38

chico008 a écrit :

Bonjour a tous

J'aurais besoin d'aide pour un petit truc.
voila, dans un formulaire, j'ai une liste deroulante avec plusieurs option, liste avec un banal <select><option value=...></select>

ce que j'aimerais faire, c'est que des que je fait un choix dans ma liste, qu'une image se mette a jour toute seul dans la meme page.
j'ai vu en JS une chose qui s'appelle OnChange, ca me paraissait une bonne idée, mais comment recuperer la valeur de l'option choisie en JS ?

donc si vous avez une idée sur la chose, merci de votre aide.

Personnelement j'utilise un onclick sur chaque option.

Le XHTML :

<select>
<option value="createCat" onclick="montre('createCat')">Créer une catégorie</option>
<option value="deleteCat" onclick="montre('deleteCat')">Supprimer une catégorie</option>
</select>
<img src="images/createCat.png" id="createCat" />
<img src="images/deleteCat.png" id="deleteCat" />

Le JS :

function montre(id){
document.getElementById('createCat').style.display="none";
document.getElementById('deleteCat').style.display="none";
document.getElementById(id).style.display="block";
}

Reply

Marsh Posté le 09-09-2006 à 11:40:31

1- le onclick n'est pas géré sur les options car cela depend du navigateur et en plus l'utilisateur peux très bien se servir de son clavier pour choisir les options [:petrus75]
2- Le onchange sur le select est quand même mieux
3-Voila un truc beaucoup plus générique :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function catsel(sel) {
if (sel.value==-1) return;
var opt=sel.getElementsByTagName("option" );
for (var i=0; i<opt.length; i++) {
var x=document.getElementById(opt[i].value);
if (x) x.style.display="none";
}
var cat = document.getElementById(sel.value);
if (cat) cat.style.display="block";
}
</script>
</head>
<body>
<select onchange="catsel(this)">
<option value="-1">Sélectionnez une categorie</option>
<option value="cat1">categorie 1</option>
<option value="cat2">categorie 2</option>
<option value="cat3">categorie 3</option>
<option value="cat4">categorie 4</option>
</select>
<div id="cat1" style="display:none">
Categorie 1
</div>
<div id="cat2" style="display:none">
Categorie 2
</div>
<div id="cat3" style="display:none">
Categorie 3
</div>
<div id="cat4" style="display:none">
Categorie 4
</div>
</body>
</html>

Message cité 1 fois

Reply

Marsh Posté le 09-09-2006 à 11:55:18

gatsu35 a écrit :

1- le onclick n'est pas géré sur les options car cela depend du navigateur et en plus l'utilisateur peux très bien se servir de son clavier pour choisir les options [:petrus75]
2- Le onchange sur le select est quand même mieux
3-Voila un truc beaucoup plus générique :

1 - Je ne savais pas que ce n'était pas géré par tous les navigateurs et j'avais pas penser au clavier :whistle:
2 - Je vais changer cela sur mes pages
3 - Merci

Message cité 1 fois

Reply

Marsh Posté le 09-09-2006 à 12:00:06

CNeo a écrit :

1 - Je ne savais pas que ce n'était pas géré par tous les navigateurs et j'avais pas penser au clavier :whistle:
2 - Je vais changer cela sur mes pages
3 - Merci

:jap:

[:kbchris]

Reply

Marsh Posté le 09-09-2006 à 12:53:09

ok, ca marche impec, merci beaucoup.

Reply

[HTML/JS]Mise a jour d'une image apres un choix dans une liste

Sujets relatifs:

Leave a Replay