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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/JS]Mise a jour d'une image apres un choix dans une liste

chico008

what the wookie says ?

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

Publicité

CNeo

chico008 a écrit :

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";
}

gatsu35

Blablaté par Harko

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

CNeo

gatsu35 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

Message cité 1 fois

gatsu35

Blablaté par Harko

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]

chico008

what the wookie says ?

ok, ca marche impec, merci beaucoup.

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
[C#/Excel] Comment ajouter une liste déroulante dans une cellule ?	Voir le code HTML generer par une trasnformation xls
Fusion XSL + XML -> HTML , c'est gourmand en ressource ?	[HTML/Webmail clients]Appliquer une taille de fonte à tout le doc?
Balise HTML correpondant à un panel	[HTML/JS]Curseur particulier
[.JS HTML] Comment imposer au navigateur les extensions de fichiers ..	Balises pour mettre une image sur un mail ?
[HTML et javascript] Affichage d'images à tour de rôle	accès réservé sur site html?
Plus de sujets relatifs à : [HTML/JS]Mise a jour d'une image apres un choix dans une liste

Page générée en 0.044 secondes