select要素 option:selectedの背景カラー変更

Question

#解決したいこと
select要素のoption:selectedの選択された時のみ背景カラーを変更したいです。
デフォルトのセレクト表示のみは、赤色などの色に指定しておきたいです。
年月日のセレクトにしているのですが、数字部分をjQueryで作成しています。
いろいろと試したのですが、jQueryでoption:selectedの背景カラーを設定すると、年月日のプルダウンが消えてしまいます。
どうしたらちゃんと動作するでしょうか。

<label>
   <select id="year">
      <option value="" selected>----</option>
   </select>
</labe>
<label>
   <select id="month">
      <option value="" selected>----</option>
   </select>
</labe>
<label>
   <select id="day">
      <option value="" selected>----</option>
   </select>
</labe>

select {
   background: red;
}

/*これも試してみましたが、うまくいきませんでした*/
/*scriptなし時*/
select [option]:selected {
   background: #fff;
}

$(function(){
	var $i = 1;
	for ($i; $i <=64 ; $i++){
		var $num = ('0' + $i).slice(-2);
		$('#year').append('<option value="">'+ $num +'</option>');
	}
});
$(function(){
	var $i = 1;
	for ($i; $i <=12 ; $i++){
		var $i = ('0' + $i).slice(-2);
		$('#month').append('<option value="">'+ $i +'</option>');
	}
});
$(function(){
	var $i = 1;
	for ($i; $i <=31 ; $i++){
		var $i = ('0' + $i).slice(-2);
		$('#day').append('<option value="">'+ $i +'</option>');
	}
});

$(function(){
	$('select').on('change',function(){
		var $selected = $(this).find('option:selected');
		$selected.removeClass('sl');
		if($(this).prop('selected')){
			$selected.addClass('sl').css({'background','#fff'});
		}
	});
});

Answer 1

そもそもselectのoptionの背景カラーは任意に指定できないのでは？

追記

つまり、selectの2番め以降のoptionが選ばれた時に色を変えるということでしょうか？

<style>
.sl{background-Color:red;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $.each([{id:'#year',start:1,end:64},{id:'#month',start:1,end:12},{id:'#day',start:1,end:31}],function($x,$y){
    for (var $i = $y["start"]; $i <=$y["end"] ; $i++){
      var $num = ('0' + $i).slice(-2);
      $($y["id"]).append($('<option>').val($i).text($num));
    }
  });
  $('select').on('change',function(){
    console.log($(this).prop('selectedIndex')>0);
    $(this).toggleClass("sl",$(this).prop('selectedIndex')>0);
  });
});
</script>

<label>
   <select id="year">
      <option value="" selected>----</option>
   </select>
</labe>
<label>
   <select id="month">
      <option value="" selected>----</option>
   </select>
</labe>
<label>
   <select id="day">
      <option value="" selected>----</option>
   </select>
</labe>

Comments

[kotori_00]

ご意見ありがとうございます。
http://klutche.org/archives/1591/
このデモのようにしたいのです。

＜追記＞
これではvalで指定していますが、:selectedで背景カラーを指定したいのです。

[yambejp]

デモを見ましたが、選ばれたoptionではなくselect全体の背景色が変わっているようですが
それでよいのでしょうか？

[kotori_00]

わたしの考えがうまく伝えられず、すみません。
デモのようにselect全体の背景色を変更したいです。

[yambejp]

追記しときました

[kotori_00]

ご指摘ありがとうございました。
解決できました。

Answer 2

$( function() {
	for ( let i = 1 ; i <= 64; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#year' ).append( '<option value="">' + _i  + '</option>' );
	}
	for ( let i = 1 ; i <= 12; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#month' ).append( '<option value="">' + _i + '</option>' );
	}
	for ( let i = 1 ; i <= 31; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#day' ).append( '<option value="">' + _i + '</option>' );
	}
	$( 'select' ).on('change', function() {
		var $options = $( this ).find( 'option' );
		$options.removeClass( 'sl' ).filter( ':selected' ).addClass( 'sl' );
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/h9q78v8c/1/](https://jsfiddle.net/h9q78v8c/1/)

---

**追記：**

こういうことか。

```JavaScript
$( function() {
	for ( let i = 1 ; i <= 64; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#year' ).append( '<option value="' + _i + '">' + _i  + '</option>' );
	}
	for ( let i = 1 ; i <= 12; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#month' ).append( '<option value="' + _i + '">' + _i + '</option>' );
	}
	for ( let i = 1 ; i <= 31; i++ ) {
		let _i = ( '0' + i ).slice( -2 );
		$( '#day' ).append( '<option value="' + _i + '">' + _i + '</option>' );
	}
	$( 'select' ).on('change', function() {
		if ( $( this ).val() ) {
			$( this ).addClass( 'sl' );
		} else {
			$( this ).removeClass( 'sl' );
		}
	} );
} );
```**動くサンプル：**[https://jsfiddle.net/h9q78v8c/2/](https://jsfiddle.net/h9q78v8c/2/)

Comments

[kotori_00]

ご回答ありがとうございます。
scriptのコードの見直しで、数字のプルダウンは解決できました。
ですが、:selectedの背景カラーが変更されません。
動くサンプルでも:selectedの背景カラーが変更されていないのですが、どうしたらうまくいくでせようか。

[kei344]

> :selectedの背景カラー
プルダウンしたときに、選択した要素以外にマウスを持っていくと選択した要素が赤くなっているのがWindows/Firefox/Chrome で確認できると思います。

[kotori_00]

chromeやfirefoxで確認したのですが、やはり背景カラーが赤くなりません。
バージョンの違いでしょうか？

[kei344]

optionの背景を変えたいのかとおもっていました。回答本文に追記しました。

[kotori_00]

考えがうまく伝えられずすみません。
解決できました！
ありがとうございます！！

Answer 3

リンク内容

【jQuery】選択した項目によってセレクトボックスの色を変える方法 ｜ KLUTCHE