オプションの選択後に選択のJavascript/Jqueryクラスを変更する

色がグレーの選択ボックスがありますが、オプションを選択するとボックスの色が黒くなります。私は私の誤りを把握することができないよう、このイベントにオプションの選択後に選択のJavascript/Jqueryクラスを変更する

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

を達成するために、次のコードを使用しています。テキストの色を変更することはできませんので、私は思う

出典

2016-09-22 Anup Gupta

は、あなたではなく選択よりも、オプションタグをスタイリングすることではないでしょうか？ – Utkanos

うまく動作します。開始時は選択後グレーで黒に変わります。あなたはどんな問題に直面していますか？ –

あなたは背景色を意味しますか？ – depperm

あなたの要件に応じて動作するようです。ここで

は、コードへのリンクです：http://codepen.io/anon/pen/rrjGEO

マークアップ：

<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta charset="utf-8" /> 
    <title>Select Box</title> 
    <script src="https://code.jquery.com/jquery-3.1.0.js" 
      integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" 
      crossorigin="anonymous"></script> 

    <style> 
     .grey_color { 
      color: #999; 
     } 

     .black_color { 
      color: #000; 
     } 
    </style> 

    <script> 
     $(document).ready(function() { 
      $('.change_color').on("change", function() { 
       $(this).removeClass('grey_color'); 
       $(this).addClass('black_color'); 
      }); 
     }); 

    </script> 
</head> 
<body> 
    <div> 
     <select class="change_color grey_color"> 
      <option>12th Standard</option> 
      <option>High School</option> 
      <option>First Year</option> 
     </select> 
    </div> 
</body> 
</html>

出典

2016-09-22 13:56:10

let opt = document.querySelector(".change_color"); 
 

 
opt.addEventListener("change", function() { 
 
    this.classList.remove("grey_color"); 
 
    this.classList.add("black_color"); 
 
    console.log(1); 
 
});

.grey_color { 
 
    background: #999; 
 
} 
 
.black_color { 
 
    background: #000; 
 
    color: #FFF; 
 
}

<div> 
 
    <select class="change_color grey_color"> 
 
    <option>12th Standard</option> 
 
    <option>High School</option> 
 
    <option>First Year</option> 
 
    </select> 
 
</div>

はありますか？私は本当に理由を知らないが、私は知っている、それは私

出典

2016-09-22 13:48:27

今私は自分のコードスニペットを実行していて、スタックオーバーフローで正常に動作していますが、私のプロジェクトでは動作しません。問題は私が推測する何か他のものです。 –

あなたのコードについてGITを作ってください、それが助けになると思いますか？ –

私は今document.readyを追加しなければなりません。あなたのお時間をありがとう。 –

あなたのコードのために働くです（スニペット内のJavaScript/jQueryコードの周囲にあるscriptタグを失う可能性もありますが）何かが選択されると、選択リストの色がグレーから黒に変わります。

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
} 
 
.black_color{ 
 
    color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

あなたは背景色がテキストの色の代わりに変更することを期待していますか？ CSSを変更して、あなたが意図していた場合はbackground-colorのプロパティを変更できますか？

$('.change_color').on("change",function() { 
 
    $(this).removeClass('grey_color'); 
 
    $(this).addClass('black_color'); 
 
});

.grey_color{ 
 
    color: #999; 
 
    background-color: none; 
 
} 
 
.black_color{ 
 
    background-color: #000; 
 
    color: #fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
    <select class="change_color grey_color"> 
 
\t <option>12th Standard</option> 
 
\t <option>High School</option> 
 
\t <option>First Year</option> 
 
    </select> 
 
</div>

出典

2016-09-22 13:48:59

あなたのコードが動作しているが、あなたは、テキストの色を変更する色プロパティを設定するCSSクラスを持っている：下記を参照してください。背景色を変更する場合は、背景色プロパティを使用する必要があります。

.grey_color { 
    background-color: #999; 
} 
.black_color { 
    background-color: #000; 
    color: #fff; 
}

出典

2016-09-22 13:54:35 Nemery

私はちょうど$（文書）を追加しなければならなかった私のスクリプトの周り.readyと今のは完全に正常に動作。

<script> 
 
     $(document).ready(function() { 
 
      $('.change_color').on("change", function() { 
 
       $(this).removeClass('grey_color'); 
 
       $(this).addClass('black_color'); 
 
      }); 
 
     }); 
 

 
    </script>

出典

2016-09-22 14:04:05

オプションの選択後に選択のJavascript/Jqueryクラスを変更する

答えて

関連する問題