質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

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

tkshp
tkshp

総合スコア164

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

0クリップ

6784閲覧

投稿2017/09/20 08:11

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

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

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と出力されているのに、選んだ時の項目の色が変更されていない所です。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

rrt

2017/09/20 08:18

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

2017/09/20 08:19

ブラウザは何でしょうか?
tkshp

2017/09/20 08:33

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

回答2

2

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

JavaScript

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

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

投稿2017/09/20 08:27

x_x

総合スコア13729

kei344, tkshp👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tkshp

2017/09/20 08:32

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

1

ベストアンサー

選択したオプションの色は正しく赤に変更されています。
色変更を選択後、再度選択しなおそうとすればそのことがわかります。
色が変更されていないように見えるのは、選択後に表示されている選択肢の文字色は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>

投稿2017/09/20 08:28

退会済みユーザー

退会済みユーザー

総合スコア0

kei344👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tkshp

2017/09/20 08:32

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。