web-dev-qa-db-fra.com

Modifier la couleur du texte de l'option sélectionnée dans une zone de sélection

J'ai une boîte de sélection. Les options ont été stylisées de différentes couleurs via un fichier CSS référencé. Je veux pouvoir sélectionner une option et changer la couleur du texte de la boîte de sélection fermée à la couleur de l'option choisie.

<select id="mySelect" class="yellowText">
    <option class="greenText" value="Apple" >Apple</option>
    <option class="redText" value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

Donc, si je sélectionne Banana, le texte devrait passer du jaune au rouge.

J'ai essayé:

onchange="this.style.color = this.options[this.selectedIndex].style.color;"

Mais cela ne fonctionne que si je définis mes styles dans les balises d'option dans le document html.

J'ai également essayé JavaScript:

function setSelectColor(thisElement){
    var thisElem = document.getElementById(thisElement);
    var thisOption = thisElem.options[thisElem.selectedIndex];
    var newColor = getStyle(thisOption,"color");
    alert("New Color: "+ newColor);
}

Mais cela renvoie toujours la couleur: blanc. La fonction getStyle fonctionne partout ailleurs je l'utilise donc je ne pense pas que ce soit le problème.

J'ai obtenu getStyle à partir de ce site Web:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

Comment puis-je résoudre ce problème avec JavaScript?

javascripthtmlcssdrop-down-menucolors
23
BobLopez

Essaye ça:

.greenText{ background-color:green; }

.blueText{ background-color:blue; }

.redText{ background-color:red; }
<select
    onchange="this.className=this.options[this.selectedIndex].className"
    class="greenText">
     <option class="greenText" value="Apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>
37
Sharun

CAS UNE COULEUR - CSS uniquement

Juste pour enregistrer mon expérience, où je voulais définir seulement la couleur du option sélectionnée à une couleur spécifique.

J'ai d'abord essayé de définir par css uniquement la couleur de l'option sélectionnée sans succès.

Ensuite, après avoir essayé quelques combinaisons, cela a fonctionné pour moi avec SCSS:

select {
      color: white; // color of the selected option

      option {
        color: black; // color of all the other options
      }
 }

Jetez un oeil à un exemple de travail avec seulement CSS:

select {
  color: yellow; // color of the selected option
 }

select option {
  color: black; // color of all the other options
}
<select id="mySelect">
    <option value="Apple" >Apple</option>
    <option value="banana" >Banana</option>
    <option value="grape" >Grape</option>
</select>

Pour différentes couleurs, selon l'option sélectionnée, vous devrez composer avec js.

18
Mauricio Moraes

Vous pourriez le faire comme ça.

jsFiddle

[~ # ~] js [~ # ~] 

var select = document.getElementById('mySelect');
select.onchange = function () {
    select.className = this.options[this.selectedIndex].className;
}

[~ # ~] css [~ # ~] 

.redText {
    background-color:#F00;
}
.greenText {
    background-color:#0F0;
}
.blueText {
    background-color:#00F;
}

Vous pouvez utiliser option { background-color: #FFF; } si vous voulez que la liste soit blanche.

[~ # ~] html [~ # ~] 

<select id="mySelect" class="greenText">
    <option class="greenText" value="Apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>

Comme il s'agit d'un select, cela n'a pas vraiment de sens d'utiliser .yellowText comme aucun sélectionné si c'est ce que vous vouliez dire car quelque chose doit être sélectionné.

5
Daniel Imms

Code JQuery:

$('#mySelect').change(function () {
    $('#mySelect').css("background", $("select option:selected").css("background-color"));
});

Cela remplacera le selectbackground-color avec option sélectionné background-color.

Voici un exemple de violon.

4
MarmiK