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

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

ただいまの
回答率

90.50%

  • jQuery

    8162questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,050
退会済みユーザー

退会済みユーザー

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

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> 日
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2017/08/23 16:36

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2017/08/23 16:42

    ありがとうございます。htmlもダミーで記載しました><

    キャンセル

  • mts10806

    2017/08/23 16:44 編集

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

    キャンセル

回答 3

checkベストアンサー

+2

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読み込み終了時に実行」としてはどうでしょうか。

例:

$(function(){

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

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/23 16:56

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

    キャンセル

  • 2017/08/23 16:58 編集

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

    キャンセル

  • 2017/08/23 17:06

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

    キャンセル

+1

$('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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/23 17:26

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

    キャンセル

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/23 16:55

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

    キャンセル

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

  • jQuery

    8162questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。