プルダウンを選択した時に特定の要素にイベントを起こす

JQuery を使った changeイベント + value の取得 + 特定の要素にCSS

See the Pen
by ぼぶ@朝活input中 (@bobu_6326)
on CodePen.

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script>
</head>

<body>
  <select name="number">
    <option selected>選択してください</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <div class="box">
    <p class="1">1</p>
    <p class="2">2</p>
    <p class="3">3</p>
    <p class="4">4</p>
  </div>

</body>
</html>

CSS

.box{
  height: 100px;
  display: flex;
}
p{
  text-align: center;
  line-height: 100px;
  width: 100px;
  height: inherit;
  margin: 0;
  background-color: #ddd;
}

JQuery

$(function(){
  $("select").on("change",function(){
    let value = "."+ $(this).val();
    $(".box").find(value).css("background-color","#eee");
    $(".box p").not(value).css("background-color","#ddd");
  })
});

解説

HTML

select に option を5つ設定。一つは初期状態の選択肢と4つの value

JQuery

  • $(“select”).on(“change”,function(){ }) = select タグに変化があった時にイベントを発生させる
  • let value = let で関数を作る宣言 「value」 という関数を作る
  • = “.”+$(this).val() = $(this) で変化した select を指定して、.val() で value の値を取得。class名として使うので頭に “.” を追加する
  • $(“.box).find(value).css(“background-color”,”#eee”); = .box の中で value関数 と同じクラス名の要素を探して、background-color: #eee を付与する
  • $(“.box p”).not(value).css(“background-color”,”#ddd”); = 今度は .box の中の p に value関数 と[異なる]クラス名に css を付与する。この一行がないと他の選択肢を選んだ時に色が戻らない
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。