1. #1
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 267
    Points : 158
    Points
    158

    Par défaut 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 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)

  2. #2
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    765
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 765
    Points : 1 208
    Points
    1 208

    Par défaut

    console.log(text.data.substr(0, 1), text.data.substr(2, 10), text.data.substr(0, text.data.indexOf(' ')+1));
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  3. #3
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 267
    Points : 158
    Points
    158

    Par défaut

    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.

  4. #4
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    765
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 765
    Points : 1 208
    Points
    1 208

    Par défaut

    Ca corrige l'erreur que tu avais. C'est déjà ça.
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  5. #5
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    765
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 765
    Points : 1 208
    Points
    1 208

    Par défaut

    Citation Envoyé par smccbbm Voir le message
    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 ?
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  6. #6
    Membre régulier
    Profil pro
    Inscrit en
    mai 2010
    Messages
    158
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : mai 2010
    Messages : 158
    Points : 106
    Points
    106

    Par défaut

    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.

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 953
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 953
    Points : 25 544
    Points
    25 544

    Par défaut

    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é ».

  8. #8
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 267
    Points : 158
    Points
    158

    Par défaut

    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 ?!

  9. #9
    Membre éprouvé Avatar de badaze
    Homme Profil pro
    Chef de projets info
    Inscrit en
    septembre 2002
    Messages
    765
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Chef de projets info
    Secteur : Transports

    Informations forums :
    Inscription : septembre 2002
    Messages : 765
    Points : 1 208
    Points
    1 208

    Par défaut

    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.
    Cela ne sert à rien d'optimiser quelque chose qui ne fonctionne pas.

    Mon site : www.emmella.fr

    Je recherche le manuel de l'Olivetti Logos 80B.

  10. #10
    Membre habitué
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    décembre 2008
    Messages
    267
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 66
    Localisation : France, Ain (Rhône Alpes)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : décembre 2008
    Messages : 267
    Points : 158
    Points
    158

    Par défaut

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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comparer deux date dans une requete select simple
    Par isac83 dans le forum Requêtes
    Réponses: 1
    Dernier message: 23/09/2007, 10h53
  2. Couleur dans les options d'une liste
    Par psgman113 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 12/04/2007, 22h54
  3. Requête SELECT avec deux champs dans une colonne ??
    Par fredhali2000 dans le forum Requêtes et SQL.
    Réponses: 6
    Dernier message: 08/06/2006, 11h41
  4. Réponses: 2
    Dernier message: 19/05/2005, 17h02
  5. Comment mettre des lignes de couleur dans une TCheckListBox ?
    Par Isa31 dans le forum Composants VCL
    Réponses: 9
    Dernier message: 31/03/2005, 09h40

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo