jQuery : attribut data-* dans une boucle

Version imprimable

04/11/2012, 14h13
okoweb

jQuery : attribut data-* dans une boucle
Bonjour,
A partir d'une boucle, je crée dynamiquement des options d'un select. Et pour chacune des options, je souhaite ajouter un attribut data-*. Et pour cette cause j'ai fait ce code :
Code:

1 2 3 4 var items = data; for(var i in items){ $("<option/>",{'data-level': items[i].level}).appendTo("#select"); }
L'attribut data-level est bien créé mais je ne sais si c'est une bonne façon.
Je ne sais pas comment faire fonctionner cela par cette méthode :
Code:

1 2 3 4 5 var items = data; for(var i in items){ $("<option/>").appendTo("#select"); $(this).data('level', items[i].level);//ajout de l'attribut ainsi }
En outre comment récupérer la valeur de l'attribut level avec un onchange sur le select ?
Code:

1 2 3 $("#select").on("change", function(){ alert(valeur de l'attribut level de l'option séléctionnée); });
Merci d'avance...
04/11/2012, 16h43
okoweb

Code:

$("<option/>",{value: items[i].id, html: items[i].name}).data("level", items[i].level).appendTo("#select");

En regardant firebug, level n'est pas ajouté.

Merci pour votre aide.

Bonsoir

On dirait qu'il y a un souci avec change() !

Les codes de mon test :

<select id="selectID"></select>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var data = [
		"images/adoptez-le.png",
		"images/avatarDVJH.jpg",
		"images/badge.jpg"
	];
 
for(var i in data){
	$( '<option value="' + i + '" data-dvjh-src="' + data[ i ] + '">' + i + '</option>' ).appendTo( "#selectID" );
}
 
// liste les dvjhSrc
$( "#selectID > option" ).each( function( i, item ){
	console.log( $( item ).data( "dvjhSrc" ) );
});
 
// donne undefined pour les dvjhSrc
$( "#selectID" ).change( function(){
	console.log( $( this ).val(), $( this ).data( "dvjhSrc" ) );
});
 
// donne bien un objet contenant la propriété dvjhSrc
console.log( $( "option" ).eq(2).data() );

Code:

1
2
3
4
5
6
7
8
9
10
11
function optionIndex( index ){
	return $( "#selectID > option" ).eq( index ).data( "dvjhSrc" );
}
 
/*
 * On utilise this.selectedIndex et la méthode optionIndex( index ) 
 * pour contourner le bogue et obtenir la valeur de data( "dvjhSrc" ).
 */
$( "#selectID" ).change( function(){
	console.log( $( this ).val(), optionIndex( this.selectedIndex ) );
});

Citation:

Envoyé par danielhagnoul

Code:

1
2
3
4
5
6
7
8
9
10
11
function optionIndex( index ){
	return $( "#selectID > option" ).eq( index ).data( "dvjhSrc" );
}
 
/*
 * On utilise this.selectedIndex et la méthode optionIndex( index ) 
 * pour contourner le bogue et obtenir la valeur de data( "dvjhSrc" ).
 */
$( "#selectID" ).change( function(){
	console.log( $( this ).val(), optionIndex( this.selectedIndex ) );
});

Merci.:ccool:

04/11/2012, 23h24
danielhagnoul

Solution proposée pour la :faq: Comment obtenir la valeur d'un attribut data-* lors d'un événement change() ?
05/11/2012, 08h18
Bovino
Code:

1 2 3 $( "#selectID" ).change( function(){ console.log( $( this ).find(':selected').data() ); });
Fonctionne aussi bien ;)

Citation:

Envoyé par okoweb

En regardant firebug, level n'est pas ajouté.

Normal si tu regardes dans l'onglet HTML, la méthode data() ne sert pas à rajouter un attribut HTML qui n'aurait aucune utilité mais à alimenter le dataset de l'objet HTMLElement correspondant.
Donc si tu regardes dans l'onglet DOM, tu devrais le voir apparaitre.
05/11/2012, 08h50
danielhagnoul

Bonjour

$( this ).find( ":selected" ).data( "dvjhSrc" );.

Bien vu ! :ccool:

C'est la solution la plus logique et la plus simple.