Mettre la classe de l'option sélectionné au select ?

barbuslex · 13/12/2010, 13h42

Bonjour,

Je débute à peine avec jquery et j'ai un petit soucis.

J'ai 10 select dans une pages qui me permette de lier des personnes à un formulaire.

Seulement dans le select il y a des options que l'on différencie avec leur couleur de fond.

J'aimerais que la class de l'option sélectionné s'applique à la class du select mais je n'arrive pas a le faire avec jquery.

Voici ce que j'ai commencé a faire :

Code :

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

1
2
3
4
5
6
$(function() {
	$("select").attr("class", function() {
		return $("select option:selected").attr("class");
	});
 
});

Mais cela ne fonctionne pas car cela me met la même class sur tout les select (couleur de fond jaune) alors qu'il devrait mettre du bleu sur certain select que j'ai sélectionné.

Dans l'attente,
++

larffas68 · 13/12/2010, 15h01

Salut,

voici un exemple de comment tu peux faire :

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
<html>
<head>
<link href="style.css" rel="stylesheet" media="all" type="text/css">
<script src='jQuery.js' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
    	$("select").change( function () { 
		$(this).attr("class",$(this).children('option:selected').attr("class"));		
	});
});
</script>
</head>
<body>
	<select id="fonction" name="fonction" class='noneclass'>
		<OPTION VALUE="0" class='noneclass'>---</OPTION>
		<OPTION VALUE="enseignant" class='test'>test 1</OPTION>
		<OPTION VALUE="etudiant" class='test2'>test 2</OPTION>
	</select>
</body>
</html>

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.test {
	background-color:blue;
	color: red;
}
 
.test2 {
	background-color:red;
	color:blue;
}
 
.noneclass {
	background-color:white;
	color: black;
}

Et cela fonctionne du moins si j'ai bien compris ce que tu voulais faire

A+

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email