Discussion :

[okoweb]

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 :

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

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 :

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

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 :

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

1
2
3
$("#select").on("change", function(){
	alert(valeur de l'attribut level de l'option séléctionnée);
});

Merci d'avance...

[okoweb]

Code :

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

$("<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.

[danielhagnoul]

Bonsoir

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

Les codes de mon test :

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

Code :

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

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() );

[danielhagnoul]

Code :

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

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

[okoweb]

Code :

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

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.

[danielhagnoul]

Solution proposée pour la Comment obtenir la valeur d'un attribut data-* lors d'un événement change() ?