フォームで入力されたら色が変わる

Question

フォームでセレクトが選択されてたら、色が変わるというのを下記で記載したのですが、複数selectがフォームの場合ですと、うまく挙動しません。
１つ選択するとページ内全てのselectの色がｇｒｅｅｎに変わります
どなたか分かるかたいらっしゃいますでしょうか。

function hoge() {

  if($('select').prop("selectedIndex") == 0) {
    $('select').css({'color': 'red'});
  }
 
  $('select').on('change', function(){
    if($('select').prop("selectedIndex") == 0) {
      $('select').css({'color': 'red'});
    } else {
      $('select').css({'color': 'green'});
    }
  });
}
hoge();

html

<select name="ccc" id="bbb" class="aaa">
<option value="">選択してください</option>
<option value="">aaaa</option>
<option value="">aaaa2</option>
<option value="">aaaa3</option>
</select> 誕生日
<select name="" id="bbb" class="aaa">
<option value="----">選択してください</option>
<option value="1980">2017</option>
<option value="1981">2016</option>
</select> 年
<select name="ccc" id="bbb" class="aaa">
<option value="0">選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
</select> 月
<select name="ccc" id="bbb" class="aaa">
    <option value="0">選択してください</option>
<option value="1">1</option>
</select> 日

Comments

[m.ts10806]

念のためHTMLも追記願います。

[退会済みユーザー]

ありがとうございます。ｈｔｍｌもダミーで記載しました＞＜

[m.ts10806]

idはページ内に1つしか置いてはいけないというルールがありますので、そこは調整する必要があります。http://rensabanet.com/blog/hp/12071/

Answer 1

select のみですと、ページ内全てのselectに影響を及ぼします。
影響させたい対象を絞り込むための記載が必要です。

対象のselectのみclassを与える

※classは何個与えてもOKなので対象用のクラスを別で用意しましょう

<select name="hoge1" class="aaa hogehoge">
</select>
<select name="hoge2" class="aaa">
</select>
<select name="hoge3" class="aaa hogehoge">
</select>

  //何回も書くと冗長になるので変数にしておく
  var selecthoge = $('select.hogehoge');

  if(selecthoge.prop("selectedIndex") == 0) {
    selecthoge.css({'color': 'red'});
  }

　//対象全て一気に影響するパターン
  selecthoge.on('change', function(){
    if(selecthoge.prop("selectedIndex") == 0) {
      selecthoge.css({'color': 'red'});
    } else {
      selecthoge.css({'color': 'green'});
    }
  });

　//選択したものだけ影響させるパターン
  selecthoge.on('change', function(){
    if($(this).prop("selectedIndex") == 0) {
      $(this).css({'color': 'red'});
    } else {
      $(this).css({'color': 'green'});
    }
  });

対象のselectが1つしかない場合はIDを与える

<select name="hoge1" id="hogehoge" class="aaa">
</select>
<select name="hoge2" class="aaa">
</select>
<select name="hoge3" class="aaa">
</select>

  var selecthoge = $('#hogehoge'); //idはページ内に1つしかないのでselectは不要

  if(selecthoge.prop("selectedIndex") == 0) {
    selecthoge.css({'color': 'red'});
  }

  selecthoge.on('change', function(){
    if(selecthoge.prop("selectedIndex") == 0) {
      selecthoge.css({'color': 'red'});
    } else {
      selecthoge.css({'color': 'green'});
    }
  });

※対象が今は1つでも後に増える可能性があるのであればclassの方が良いです。

追記。
hoge()で実行していますが、このままだと「変更都度実行」が出来ないのではないかと思います。
関数にするのではなく、「HTML読み込み終了時に実行」としてはどうでしょうか。

• jQueryの基本 - $(document).ready

例：

$(function(){

  if($('select').prop("selectedIndex") == 0) {
　　　～～～処理
  }

  $('select').on('change', function(){
　　　～～～処理
  });
});

Comments

[退会済みユーザー]

ありがとうございます。classで指定するとやはり変わってしまうので、idでそれぞれ指定し４つ同じ記述で書くことにしました。

[m.ts10806]

同じ記述を何個も書くのは少々無駄になります。メンテナンス性も損ねます。
classでもthisを利用することで「自身だけ」が可能なのでそのパターンの追記と、
気になる点があったので追記しました。そちらもご一読ください。

[退会済みユーザー]

素晴らしいです！なるほど！そういった書き方もあるんですね＞＜勉強になります！本当にありがとうございました。

Answer 2

$('select')の代わりに$(this)を使えばよいです。

……で終わりなんですが、要件によってはCSSだけでもできるかと思います。

required属性をつけ、未選択のvalueを空に

<select name="" id="bbb" class="aaa" required="required">
<option value="">選択してください</option>

select:required:valid {
  color: green;
}

select:required:invalid {
  color: red;
}

擬似クラス
https://developer.mozilla.org/ja/docs/Web/CSS/:required
https://developer.mozilla.org/ja/docs/Web/CSS/:valid
https://developer.mozilla.org/ja/docs/Web/CSS/:invalid

Comments

[退会済みユーザー]

ありがとうございます＞＜
こちらが特殊なものでしてrequiredの要素を付け加えることが出来ないのです。
説明不足で申し訳ありません。でもたすかりました。

Answer 3

複数あるselectに同じidを振ってあるのがおかしいです。同じidが同一ｈｔｍｌの中に複数回出現してはいけません。
そのうえで、cssを変更は、selectに対してではなくそれぞれのidに対して行なえばいいでしょう。

Comments

[退会済みユーザー]

すみません、ダミーのため同じidで記載していただけでした！