Mettre deux couleurs dans une option <select>
Bonjour,
Je voudrais écrire une liste d'options select en deux couleurs.
Je prépare ma liste dans deux tableaux comme ceci:
Code:
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:
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:
Citation:
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)
