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

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

ただいまの
回答率

90.34%

  • jQuery

    7127questions

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

  • HTML5

    4320questions

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

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 559

taro_nii_chan

score 181

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

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <select id="select0">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
    $("#select0").on("change", function() {
        console.log("changed");
    });
    $("#select0").on("click", function() {
        console.log("clicked");
    });
    </script>
</body>
</html>

 やりたい事、試したこと

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

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


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

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


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

 質問

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

 補足 2018.7.19 20:39

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

 追加 2018.7.19 20:55

<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p>やりたいのは値が変わっても変わらなくても選ばれた瞬間処理が走ることです</p>
    <p>実際は
        <lebel for="select0">
            <span class="hiddenable">値が変わると消えます</span>
        </label>
        <select id="select0">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </p>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script>
    $(function() {
        $("#select0").on("change", function() {
            console.log("changed");
            $(".hiddenable").hide();
        });

        // クリックした瞬間変わるのはやりたい事とは違います
        // $("#select0").on("click", function() {
        //     console.log("clicked");
        //     $(".hiddenable").hide();
        // });

        // フォーカスを外さないと発生しない(2回クリックししなければいけない)ので
        // 同じ値を選んだ瞬間に欲しいイベントとは異なります
        $("#select0").on("blur", function() {
            console.log("blur");
            $(".hiddenable").hide();
        })
    })
    </script>
</body>
</html>

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

追記いただいているコードでそのまま考えてみます。
初期で最初のオプション(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/20 09:13

    「仮にオプションがバックエンドで何かしらの値が選択された状態でHTMLが作成され、
    同じものを選択したときにも何かしらの処理がしたいという場合」

    まさにその通りでした。

    やりたい事が常識的に可能であればと思って質問してみましたが、そう簡単ではないとわかった事が大きな収穫でした。

    今回は「選択して下さい」を selected disable にする事で妥協することにします。

    ありがとうございました。

    キャンセル

+2

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/20 09:15

    ありがとうございました

    キャンセル

+1

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

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/20 09:16

    ありがとうございました

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • jQuery

    7127questions

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

  • HTML5

    4320questions

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