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

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

ただいまの
回答率

88.21%

あるselectによって別のselectの動作が変わるプログラム

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,323
退会済みユーザー

退会済みユーザー

前提・実現したいこと

あるselectによって別のselectの動作が変わるプログラムを作っています。
動作としては、テスト0を選択して、
テスト0 = 1 => テスト1を選択したときにアラート。このときテスト2を選択してもアラートは表示されない。
テスト0 = 2 => テスト2を選択したときにアラート。このときテスト1を選択してもアラートは表示されない。
というものです。

発生している問題・エラーメッセージ

何度か操作を繰り返すと「テスト0 = 1」のときにテスト2を選択したらアラートが表示されたり、
「テスト0 = 2」のときにテスト1を選択したらアラートが表示されたりします。
if文よりも.changeのほうが優先度が高いのでしょうか?
だとしたら実現したい動作をさせるためにはどのようにプログラムを変えたらよいでしょうか?
ご指導よろしくお願いします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">


<link rel="stylesheet" href="config/bootstrap.min.css" >
<link rel="stylesheet" href="config/style.css" >
<!-- jquery -->
<script type="text/javascript" src="config/jquery-2.1.4.min.js"></script>
<script src="config/bootstrap.min.js"></script>
<script src="test.js"></script>
</head>
<body>

<div class="form-group form-inline">
    <label for="test0" class="head"> テスト0 <span class="required"></span></label>
    <select class="form-control" id="test0" name="test0" required="required">
        <option value="">選択してください</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</div>

<div class="form-group form-inline">
    <label for="test1" class="head"> テスト1 <span class="required"></span></label>
    <select class="form-control" id="test1" name="test1" required="required">
        <option value="">選択してください</option>
        <option value="1">1-1</option>
        <option value="2">1-2</option>

    </select>
</div>

<div class="form-group form-inline">
    <label for="test2" class="head"> テスト2 <span class="required"></span></label>
    <select class="form-control" id="test2" name="test2" required="required">
        <option value="">選択してください</option>
        <option value="1">2-1</option>
        <option value="2">2-2</option>
    </select>
</div>

</body>
</html>
$(function(){
    $('#test0').change(function(){
        //value取得
        var test0 = $('#test0').val();
        alert(test0);

        if(test0 == "1"){
            $("#test1").change(function(){

                alert("テスト1");

            });
        }else if(test0 == "2"){
            $("#test2").change(function(){

                alert("テスト2");

            });
        }

    });

});

試したこと

if文と.changeを入れ替えてみたりしましたが動作は変わりませんでした。

補足情報(言語/FW/ツール等のバージョンなど)

より詳細な情報

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

イベントハンドラを削除してないじゃないですか。
一度セットされたイベントハンドラは削除しない限り出てしまいます。

// イベントハンドラのセット
$('#test1').on('change',function(){
});
// イベントハンドラの削除
$('#test1').off('change');

こんな感じでイベントハンドラを削除してくださいね。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/06/24 13:59

    yambejpさん。
    ロジックうんぬんというより、イベントハンドラを付けたり削除したりを理解していないので、まずそこからですね。
    それ以降は、もっと最適化する必要があると思います。まずは質問者のソースを尊重しています。

    キャンセル

  • 2016/06/24 14:42

    To: shi_ue さん
    横からですが…、イベントの付け外し以前に「どういう理屈でイベントを削除させる必要があるのか」を理解してもらうのが先だと思います。
    その理解が不十分なまま進めているので、YoshidaPanndaさんの作り上げたコードが迷走しているように見受けられます。

    To: YoshidaPannda さん
    まず、 jQuery でイベント定義するコードを書いた場合、定義されたイベントハンドラは既存のイベントハンドラを残したまま「追加」されます。
    質問文のコードでは $('#test0').change() が呼び出された回数だけ $("#test2").change のイベントハンドラが増殖してしまいます。
    その為、shi_ue さんはイベントが「上書き」されるようにイベントを一度削除してから追加してください、とアドバイスしました。
    回答にあるコードが「on -> off」に読めるので誤解されたようですが、伝えたかったコードは「off -> on」だと思います。
    $('#test1').off('change').on('change', function () {});

    対して、yambejp さんは $("#test2").change を独立させる事でイベントのつけ外しがないコードにしました。
    複数のイベントハンドラ間で共通のデータを持つ方法は他に「jQuery の event.data」「data-* 属性」等があります。

    キャンセル

  • 2016/06/24 15:32

    THINK49さん>なるほど、細かい解説ありがとうございます。
    おかげでやっとshi_ueさんとyambejpさんの回答の意味がわかりました!
    今まで、ネットで調べてこうやったらこうなるのかーという勉強しかしていなかったので、今後はコードの意味を理解して書けるように努力します。
    shi_ueさんとyambejpさん>自分の理解力不足により、ご迷惑をおかけして申し訳ないです。。
    お二人のご意見勉強になりました!

    お三方ともベストアンサーにしたいですがそれはできないので、今回はshi_ueさんをベストアンサーにさせていただきます。

    キャンセル

+1

「#test0」のchangeは無意味では?欲しいのは#test0のvalだけですから

<script>
$(function(){
  $("#test1").change(function(){
    var test0 = $('#test0').val();
    if(test0 == "1"){
      alert("テスト1");
    }
  });
  $("#test2").change(function(){
    var test0 = $('#test0').val();
    if(test0 == "2"){
      alert("テスト2");
    }
  });
});
</script>
<div>
テスト0
<select id="test0" name="test0">
<option value="">選択してください</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div>
テスト1
<select id="test1" name="test1">
<option value="">選択してください</option>
<option value="1">1-1</option>
<option value="2">1-2</option>
</select>
</div>
<div>
テスト2
<select id="test2" name="test2">
<option value="">選択してください</option>
<option value="1">1-1</option>
<option value="2">1-2</option>
</select>
</div>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

最終的な目的が不明なので的外れかもしれませんが・・・

$("#test1")または$("#test2")が変更された時に$("#test0")の値をチェックする方向でも良いのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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