Discussion :

[rollaurel]

Bonjour à tous,

Je cherche également à afficher une image lors de la sélection d'une liste déroulante.

Mon problème est que j'y parviens uniquement lorsque j'indique ma variable dans l'attribut "value", or j'en ai besoin pour récupérer la valeur $donnees['dj'] choisie par l'utilisateur. J'ai essayé de placer ma variable dans un attribut "id" au sein de la balise option mais cela ne fonctionne pas, je n'arrive pas à récupérer la valeur de cet attribut "id".

Je n'arrive pas à détourner la chose, avez vous une idée?

Voici mon code:

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<form method="post" action="resultats_dj.php">
    <select name="dj" class="dj_choose" >
<?php while ($donnees = $reponse->fetch()){
?>
        <option value="<?php echo $donnees['dj'];?>" id="<?php echo $repertoire."mini_".$donnees['photo'];?>" ><?php echo $donnees['dj'];?></option>
<?php
}
$reponse->closeCursor();
?>
    </select>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
jQuery(function($){
	$('.dj_choose').change(function(){
		var dj_photo=$(this).attr('id');
		$('#dj_affich').attr('src', dj_photo);
	});
});

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div>
    <img src="images/photos/mini_above_and_beyond.jpg"id="dj_affich"/>
</div>
<div class="formulaire">
    <input type="submit" id="search" value="Rechercher" />
</div>
</form>

[NoSmoking]

Bonjour,
traditionnellement on met ce que l'on veux récupérer dans la value des OPTIONs, et pour récupérer la valeur de la sélection on utilise la
Comment récupérer la valeur d'un select ?

[Bovino]

J'ai essayé de placer ma variable dans un attribut "id"

C'est une mauvaise idée, l'attribut id ne sert pas à ça. En revanche, il existe des attributs personnalisables de type data-* (remplacer le * par le nom que tu souhaites donner à l'attribut) et facilement manipulables avec jQuery (ou les versions récentes des différents navigateurs).

D'autre part, dans ton code, c'est l'objet select qui est référencé par this. Tu ne peux donc pas obtenir d'infos sur une option en la demandant au select qui le contient.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

<option value="<?php echo $donnees['dj'];?>" data-urlimage="<?php echo $repertoire."mini_".$donnees['photo'];?>" ><?php echo $donnees['dj'];?></option>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$('.dj_choose').change(function(){
	var dj_photo=$(this).find(':selected').data('urlimage');
	$('#dj_affich').prop('src', dj_photo);
});

PS : renseigne-toi aussi sur la différence entre les méthodes .prop() et .attr() de jQuery.

[rollaurel]

Je ne connaissais pas ces attributs, je débute en jQuery. Je regarde ça de suite.

Pour l'objet select j'avais cru comprendre son fonctionnement avec tous mes tests en vain.

Merci à toi Bovino.

[Bovino]

Ces attributs ne sont pas spécifiques à jQuery, c'est une des nouveautés de HTML5. Il existe une API spécifique en JavaScript (dataset) que jQuery permet d'étendre aux navigateurs non compatibles.

Quant à l'objet JavaScript select (correspondant à une balise HTML <select>), il possède une propriété value dont la valeur est celle de l'attribut value de l'option sélectionnée, mais pour les autres spécificités liées à l'option choisie, alors il faut les retrouver à partir de l'option elle-même.