web-dev-qa-db-ja.com

選択ボックスで選択したオプションのテキストの色を変更する

選択ボックスがあります。オプションは、参照されているCSSファイルを介して異なる色でスタイル設定されています。オプションを選択し、閉じた選択ボックスのテキストの色を選択したオプションの色に変更できるようにします。

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

バナナを選択すると、テキストが黄色から赤に変わるはずです。

私が試してみました：

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

ただし、これはHTMLドキュメント内のオプションタグ内でスタイルを定義した場合にのみ機能します。

JavaScriptも試しました。

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

しかし、これは常に色：白を返します。 getStyle関数は、私が使用する他のすべての場所で機能するので、それが問題だとは思わない。

私はこのまさにウェブサイトからgetStyleを得ました：

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;
}

JavaScriptでこれを解決するにはどうすればよいですか？

javascripthtmlcssdrop-down-menucolors
23
BobLopez

これを試して：

.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

ONE COLOR CASE-CSSのみ

のみ選択したオプションの色を特定のものに設定したかった私の経験を登録するだけです。

私は最初にCSSで選択したオプションの色のみを設定しようとしましたが、成功しませんでした。

次に、いくつかの組み合わせを試した後、SCSSでこれが機能しました。

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

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

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>

異なる色の場合、選択したオプションに応じて、jsを処理する必要があります。

18
Mauricio Moraes

このようにすることができます。

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;
}

リストを白にする場合は、option { background-color: #FFF; }を使用できます。

[〜＃〜] 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>

これはselectであるため、何かを選択する必要があるので、.yellowTextを選択なしとして使用するのは意味がありません。

5
Daniel Imms

JQueryコード：

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

これにより、selectのbackground-color選択したoptionのbackground-color。

これがフィドルの例です

4
MarmiK