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

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

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

Q&A

解決済

3回答

14593閲覧

<select>の<option>が選ばれた時、変わったかどうかにかかわらずイベントを取得したい

taro_nii_chan

総合スコア207

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

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

0グッド

0クリップ

投稿2018/07/19 11:04

編集2018/07/19 11:55

まずはコードをご覧ください

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6</head> 7<body> 8 <select id="select0"> 9 <option value="0">0</option> 10 <option value="1">1</option> 11 <option value="2">2</option> 12 <option value="3">3</option> 13 <option value="4">4</option> 14 </select> 15 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 16 <script> 17 $("#select0").on("change", function() { 18 console.log("changed"); 19 }); 20 $("#select0").on("click", function() { 21 console.log("clicked"); 22 }); 23 </script> 24</body> 25</html>

やりたい事、試したこと

これをブラウザで表示し、<select>の値が変わった時のイベントを拾いたいときには

javascript

1$("#select0").on("change", function() { 2 // 処理 3});

で良いと思うのですが、ユーザが迷った挙げ句、値が変わらなかった、同じ値を選んだ時には処理は働かないですよね?
値が変わっても変わらなくても同じようにイベントを拾いたいのですが、

javascript

1$("#select0").on("click", function() { 2 // 処理 3});

としてしまうと<select>を触った瞬間処理が実行されてしまいます。

質問

<select>を値(option)が変わったかどうかにかかわらずどれかを選び終わった時のイベントの拾い方を教えてください。

補足 2018.7.19 20:39

質問を上手く単純化出来なくてお伝えできなかった感があるのと教えていただいたことを消化しきれていないのとあって、自分の中で考え直しているところです。
整理できたらお答えするなり補足質問させていただくなりします。

追加 2018.7.19 20:55

html

1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4 <meta charset="utf-8"> 5 <title></title> 6</head> 7<body> 8 <p>やりたいのは値が変わっても変わらなくても選ばれた瞬間処理が走ることです</p> 9 <p>実際は 10 <lebel for="select0"> 11 <span class="hiddenable">値が変わると消えます</span> 12 </label> 13 <select id="select0"> 14 <option value="0">0</option> 15 <option value="1">1</option> 16 <option value="2">2</option> 17 <option value="3">3</option> 18 <option value="4">4</option> 19 </select> 20 </p> 21 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 22 <script> 23 $(function() { 24 $("#select0").on("change", function() { 25 console.log("changed"); 26 $(".hiddenable").hide(); 27 }); 28 29 // クリックした瞬間変わるのはやりたい事とは違います 30 // $("#select0").on("click", function() { 31 // console.log("clicked"); 32 // $(".hiddenable").hide(); 33 // }); 34 35 // フォーカスを外さないと発生しない(2回クリックししなければいけない)ので 36 // 同じ値を選んだ瞬間に欲しいイベントとは異なります 37 $("#select0").on("blur", function() { 38 console.log("blur"); 39 $(".hiddenable").hide(); 40 }) 41 }) 42 </script> 43</body> 44</html>

ソースのままで申し訳ないのですが、これが一番伝わりやすいかと思いまして。意図、伝わりますでしょうか?

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

追記いただいているコードでそのまま考えてみます。
初期で最初のオプション(value="0")が選択されているので
それを再選択したときに.hiddenableを消したいとするとonChangeでは無理ですよね。
考え方を変えてオプションの一番最初に
<option value="">選択してください</option>
を入れるという方法では実現できなそうですか?

サンプル

この場合、仮にオプションがバックエンドで何かしらの値が選択された状態でHTMLが作成され、
同じものを選択したときにも何かしらの処理がしたいという場合は対応できませんね。

どうしてもというなら、ご質問の意図とは違うと思いますがセレクトボックスっぽいものを自作してみるのも一つだと思います。

HTMLはこんな感じでしょうか?(css,jsは別途必要です)

<div class="my-select"> <div class="my-selected-value"></div> <div class="my-options"> <div class="my-option" data-option="0">0</div> <div class="my-option" data-option="1">1</div> <div class="my-option" data-option="2">2</div> <div class="my-option" data-option="3">3</div> <div class="my-option" data-option="4">4</div> </div> </div>

この場合.my-optionにクリックイベントつければすべてのオプションにイベントを付けることができます。
実際は表示位置によって上に出すか下に出すかとか、オプション以外のところがクリックされたらオプション閉じないといけないとか、まぁまぁ大変だと思いますが勉強になると思います。

投稿2018/07/19 13:10

編集2018/07/19 13:37
keisukeh

総合スコア657

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taro_nii_chan

2018/07/20 00:13

「仮にオプションがバックエンドで何かしらの値が選択された状態でHTMLが作成され、 同じものを選択したときにも何かしらの処理がしたいという場合」 まさにその通りでした。 やりたい事が常識的に可能であればと思って質問してみましたが、そう簡単ではないとわかった事が大きな収穫でした。 今回は「選択して下さい」を selected disable にする事で妥協することにします。 ありがとうございました。
guest

0

clickかblurが妥当で、同じ選択肢を選んだのであれば
changeイベントは発生していないと考えるべきです

投稿2018/07/19 11:15

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

0

「イベントを取得して何をしたいか」によります。
値を保持したいだけでしたらグローバル空間に変数を宣言しておき、入れておいて、
そのグローバル空間の変数を利用するだけで良いですし。

js

1var select_value = ""; 2$(function(){ 3 select_value = $("#select0").val(); //画面表示時の値を保持 4 $("#select0").on("change", function() { 5 select_value = $("#select0").val(); //変更時の値を保持 6 }); 7});

投稿2018/07/19 11:12

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問