アプリ版：「スタンプのみでお礼する」機能のリリースについて

プルダウンリストの背景色の指定

解決済

  • 質問者：masa_to
  • 質問日時：
  • 回答数：3件

お世話になります。
現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。
<select>
<option style="background-color: #FF0000;">サンプル1</option>
<option style="background-color: #00FF00;">サンプル2</option>
<option style="background-color: #0000FF;">サンプル3</option>
<option style="background-color: #FFFFFF;">サンプル4</option>
</select>
このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、
上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。

IEとおなじ動きになるようにするには、どうしたらよいでしょうか。
ちなみに、

<select style="background-color: #FF0000">

にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。
と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。

簡単に解決できる方法などございますでしょうか。
もしくは、javascriptで解決できますでしょうか。

どうぞ宜しくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： auty
  • 回答日時：

「スタイルシートのクラス名」



<html>
<head>
<title>TAG index Webサイト</title>
<script type="text/javascript">
<!--
function chBackGround(e) {
e.className=e.options[e.selectedIndex].className;
document.getElementById('submit').focus();
}

window.onload = function() {
document.getElementById('key').className='color01';
}
// -->
</script>
<style type="text/css">
<!--
.color01 {
background-color: #FF0000;
}

.color02 {
background-color: #00FF00;
}

.color03 {
background-color: #0000FF;
}

.color04 {
background-color: #FFFFFF;
}
-->
</style>
</head>
<body>
<form name="f1" action="./DB.cgi" method="POST">
<div>
<select id="key" name="key" onchange="chBackGround(this)">
<option class="color01">
サンプル1
</option>
<option class="color02">
サンプル2
</option>
<option class="color03">
サンプル3
</option>
<option class="color04">
サンプル4
</option>
</select>
</div>
<input id="submit" type="submit" value="表示">
<input type="hidden" name="mode" value="display">
</form>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

度々のご回答ありがとうございます。
やりたいことが実現できました！！
ありがとうございました。

通報する
お礼日時：2008/04/10 10:19

No.2

  • 回答者： auty
  • 回答日時：

＞＞＞　<select style="background-color: #FF0000">


＞＞＞　にすると、IE、firefoxともにプルダウンリストの背景色が変更できた

との事なので、これをJavaScriptで書くと
------------------------------------------------------------
<script type="text/javascript">
<!--
var bc = ["#FF0000","#00FF00","#0000FF","#FFFFFF"];
function chBackGround(e) {
e.style.backgroundColor=bc[e.selectedIndex];
}

window.onload = function() {
document.getElementById('key').style.backgroundColor=bc[0];

}
// -->
</script>
------------------------------------------------------------
また、<select>タグは

<select id="key" name="key" onChange="chBackGround(this)">

としてみてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
javascriptに弱い私ですが、正に思っていた動きになりました！
ありがとうございました。

追加質問で大変申し訳ないのですが、

var bc=の部分に、16進数を記載するのではなく、スタイルシートのクラス名を指定することは可能でしょうか。

例えば、
var bc = ["color01","color02","color03","color04"];

とし、<select>タグ部分に

<select class="######">（######の部分をcolor01～color04まで、選択した値が入る）

こんなイメージです。


お手隙なときにでもご回答いただければと思います。
ひとまず、ありがとうございました！！

通報する
お礼日時：2008/04/09 18:01

No.1

  • 回答者： yambejp
  • 回答日時：

たとえばこんな感じで



<script type="text/javascript">
window.onload=function(){
var tags=document.getElementsByTagName("select");
for(var i=0;i<tags.length;i++){
tags[i].style.backgroundColor=tags[i].options[tags[i].selectedIndex].style.backgroundColor;
tags[i].onchange=function(){
this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;
}
}
}
</script>

<select>
<option style="background-color: #FF0000;">サンプル1-1</option>
<option style="background-color: #00FF00;">サンプル1-2</option>
<option style="background-color: #0000FF;">サンプル1-3</option>
<option style="background-color: #FFFFFF;">サンプル1-4</option>
</select>
<select>
<option style="background-color: #FF0000;">サンプル2-1</option>
<option style="background-color: #00FF00;">サンプル2-2</option>
<option style="background-color: #0000FF;">サンプル2-3</option>
<option style="background-color: #FFFFFF;">サンプル2-4</option>
</select>
<select>
<option style="background-color: #FF0000;">サンプル3-1</option>
<option style="background-color: #00FF00;">サンプル3-2</option>
<option style="background-color: #0000FF;">サンプル3-3</option>
<option style="background-color: #FFFFFF;">サンプル3-4</option>
</select>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
参考にさせていただきましたが、javascriptに弱い私ではイマイチ理解できず、思うような動きになりませんでした（涙）
こちらのソースをもとに、勉強させていただきます。
ありがとうございました。

通報する
お礼日時：2008/04/09 17:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報