Bonsoir à tous !

Je débute avec javascript et je n'arrive pas à débloquer un problème. .
J'ai une liste déroulante qui change la couleur d'un texte se trouvant dans une DIV.
Ce code fonctionne bien. Sauf qu’il effectue les changements de couleur à partir du nom de l’option sélectionnée.

Je souhaite que les changements de couleur se fassent à partir de l’ID ou de la valeur de chaque option.

Merci de votre aide.

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
 
 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Test</title>
		<meta charset="UTF-8" />
		<style type="text/css">
			.black {
				color: black;
			}
			.red {
				color: red;
				background: yellow;
			}
			.green {
				color: green;
			}
			.blue {
				color: blue;
			}
 
		</style>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	</head>
 
	<body>
 
		<h1>Javascript pour changement de couleur 1</h1>
		<div id="box1">
			Changement de couleur
		</div>
 
		<select id="select1">
			<option value="Black" id="Black">Black</option>
			<option value="Red" id="Red">Red</option>
			<option value="Green" id="Green">Green</option>
			<option value="Blue" id="Blue">Blue</option>
		</select>
		<script>
			$('select[id=select1]').change(function() {
				$('#box1').removeClass('black red green blue').addClass($(this).find('option:selected').text().toLowerCase());
			}).change();
 
		</script>
 
	</body>
</html>