セレクトボックスの初期値と値変更したときの色が変更できない。

###前提・実現したいこと
セレクトボックスで、初期値と値変更したときの色の変更が設定できません。
ご教授のほどよろしくお願いいたします。

###該当のソースコード

HTML
1  <select name="mySelect" id="mySelect" onchange="changeColor()">
2  省略
3  </select>

JavaScript
1	function changeColor() {
2		var options = document.myForm.mySelect.options;
3		var Idx = document.myForm.mySelect.selectedIndex;
4		var mytext = options[Idx].text;
5		if(mytext.indexOf('色変更') != -1){
6			options[Idx].style.color = 'red';
7			alert(options[Idx].style.color);  //※redと出力されるのに色が変更されない。
8		}
9	}

不思議なのは、alertではredと出力されているのに、選んだ時の項目の色が変更されていない所です。

退会済みユーザー

2017/09/20 08:18

再現ができるように貼っていただけませんか？

x_x

2017/09/20 08:19

ブラウザは何でしょうか？

tkshp

2017/09/20 08:33

クロムです。勘違いしていました。閉じた状態の色のことを指していました。

行動規範の内容に同意します

回答2件

主要ブラウザはいずれも色が変わっているようです。
閉じた状態の色のことを指しているのであれば、select自体の色を変えなければいけません。

JavaScript
1options[Idx].closest('select').style.color = 'red';

全部変わってしまうので、どうかなとは思いますが

投稿2017/09/20 08:27

x_x

総合スコア13749

tkshp

2017/09/20 08:32

ご回答ありがとうございます。勘違いしていました。閉じた状態の色のことを指していました。

行動規範の内容に同意します

ベストアンサー

選択したオプションの色は正しく赤に変更されています。
色変更を選択後、再度選択しなおそうとすればそのことがわかります。
色が変更されていないように見えるのは、選択後に表示されている選択肢の文字色はSelectタグで設定されているものだからかと思います。

HTML
1<html>
2<head>
3<script type="text/javascript">
4function changeColor() {
5    var options = document.myForm.mySelect.options;
6    var Idx = document.myForm.mySelect.selectedIndex;
7    var mytext = options[Idx].text;
8    
9    if(mytext.indexOf('色変更') != -1){
10        document.myForm.mySelect.style.color = 'blue';
11        options[Idx].style.color = 'red';
12        alert(options[Idx].style.color);
13    }
14}
15</script>
16<head>
17<body>
18<form name="myForm">
19  <select name="mySelect" id="mySelect" onchange="changeColor()">
20    <option value="a">a</option>
21    <option value="b">b</option>
22    <option value="c">c</option>
23    <option value="色変更">色変更</option>
24  </select>
25</form>
26</body>
27</html>