まずはコードをご覧ください
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/20 00:13