Discussion :

[moimp]

Bonjour,

Je voudrais écrire une liste d'options select en deux couleurs.

Je prépare ma liste dans deux tableaux comme ceci:

Code javascript :

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

1
2
3
var colors = ['red','blue','green','yellow','black','white','salmon','silver','gray','navy']; // Valeurs
var colorTextes = ['\u25fc red','\u25fc blue','\u25fc green','\u25fc yellow','\u25fc black','\u25fc white','\u25fc salmon','\u25fc silver','\u25fc gray','\u25fc navy']; // Textes affichés
arrOptions = makeOptions(colors, colorTextes);

où le caractère '\u25FC' est le petit carré à mettre en couleur.

Ces tableaux sont transmis comme arguments à une fonction qui crée les options:

Code javascript :

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
function makeOptions(optionValues, optionTextes=optionValues) {
	var options = [];
	var text, i;
	var max = optionValues.length;
	//console.log(optionTextes);
 
	for (i=0; i<max; i++) {
		if (optionValues[i] == 'optgroup') {
			// inutilisé, pour l'instant
		}
		else {
			text = document.createTextNode(optionTextes[i]);
			console.log(text.substr(0, 1), text.substr(2, 10), text.substring(0, text.indexOf(' ')+1));
			//if (text.substr(0, 1) == '\u25fc') text.substr(0, 1).style.color = text.substr(2, 10);
			options[i] = document.createElement('option');
			options[i].value = optionValues[i];
			options[i].appendChild(text);
		}
	}
	return options;
}

Ce code provoque l'erreur suivante à la ligne 13:

Uncaught TypeError: text.substr is not a function
at makeOptions (22-selectFields.js:35)
at addField (22-selectFields.js:83)
at HTMLInputElement.onclick (editPrint.php:79)

[badaze]

console.log(text.data.substr(0, 1), text.data.substr(2, 10), text.data.substr(0, text.data.indexOf(' ')+1));

[moimp]

Merci, c'est bien mais je n'arrive pas à composer mon texte d'option avec une couleur pour le premier caractère et en noir pour le reste du texte.

[badaze]

Ca corrige l'erreur que tu avais. C'est déjà ça.

[badaze]

Merci, c'est bien mais je n'arrive pas à composer mon texte d'option avec une couleur pour le premier caractère et en noir pour le reste du texte.

Déjà. Est-ce que c'est possible ?

[tepaze]

Je ne crois pas que ce soit possible...
Il est possible d'attribuer une classe css sur chaque options, mais pas d'appliquer des styles differents dans une même option.
C'est tout du moins la conclusion à laquelle j'étais arrivé il y a peu.

[NoSmoking]

Bonjour,

Je ne crois pas que ce soit possible...

Exact, si il est impératif d'avoir 2 couleurs la solution passe par un <select> « customisé ».

[moimp]

J'ai essayé ceci:

Code :

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

1
2
3
		<select name="bidon">
			<option><span style="color:red;">w</span> vvvvvvv</option>
		</select>

Ce qui me laisse penser que vous avez raison et que ce n'est déjà pas possible en html ?!

[badaze]

J'avais essayé avec l'élément first-letter de CSS mais il ne fonctionne pas avec option.
Par contre tu peux faire avec une couleur. Ça marche avec IE.

[moimp]

Bonjour et merci à tous. J'abandonne donc l'idée.