Q&A
ありがとうございました
まずはコードをご覧ください
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>
ソースのままで申し訳ないのですが、これが一番伝わりやすいかと思いまして。意図、伝わりますでしょうか？
回答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
総合スコア657
0
clickかblurが妥当で、同じ選択肢を選んだのであれば
changeイベントは発生していないと考えるべきです
投稿2018/07/19 11:15
総合スコア117702
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
総合スコア80888
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/20 00:13