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

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

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

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

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<meta http-equiv="Pragma" content="no-cache">
6<meta http-equiv="Cache-Control" content="no-cache">
7<meta name="viewport" content="width=device-width, initial-scale=1.0">
8<meta http-equiv="X-UA-Compatible" content="IE=edge">
9
10
11<link rel="stylesheet" href="config/bootstrap.min.css" >
12<link rel="stylesheet" href="config/style.css" >
13<!-- jquery -->
14<script type="text/javascript" src="config/jquery-2.1.4.min.js"></script>
15<script src="config/bootstrap.min.js"></script>
16<script src="test.js"></script>
17</head>
18<body>
19
20<div class="form-group form-inline">
21	<label for="test0" class="head"> テスト0 <span class="required">※</span></label>
22	<select class="form-control" id="test0" name="test0" required="required">
23		<option value="">選択してください</option>
24		<option value="1">1</option>
25		<option value="2">2</option>
26	</select>
27</div>
28
29<div class="form-group form-inline">
30	<label for="test1" class="head"> テスト1 <span class="required">※</span></label>
31	<select class="form-control" id="test1" name="test1" required="required">
32		<option value="">選択してください</option>
33		<option value="1">1-1</option>
34		<option value="2">1-2</option>
35
36	</select>
37</div>
38
39<div class="form-group form-inline">
40	<label for="test2" class="head"> テスト2 <span class="required">※</span></label>
41	<select class="form-control" id="test2" name="test2" required="required">
42		<option value="">選択してください</option>
43		<option value="1">2-1</option>
44		<option value="2">2-2</option>
45	</select>
46</div>
47
48</body>
49</html>

javascript
1$(function(){
2	$('#test0').change(function(){
3		//value取得
4		var test0 = $('#test0').val();
5		alert(test0);
6		
7		if(test0 == "1"){
8			$("#test1").change(function(){
9		
10				alert("テスト１");
11		
12			});
13		}else if(test0 == "2"){
14			$("#test2").change(function(){
15		
16				alert("テスト2");
17		
18			});
19		}
20
21	});
22
23});

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

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

行動規範の内容に同意します

回答3件

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

<script>
$(function(){
  $("#test1").change(function(){
    var test0 = $('#test0').val();
    if(test0 == "1"){
      alert("テスト１");
    }
  });
  $("#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>

投稿2016/06/24 04:16

yambejp

総合スコア114747

ベストアンサー

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

Javascript
1// イベントハンドラのセット
2$('#test1').on('change',function(){
3});
4// イベントハンドラの削除
5$('#test1').off('change');
6```こんな感じでイベントハンドラを削除してくださいね。

投稿2016/06/24 04:12

編集2016/06/24 04:15

shi_ue

総合スコア4437

退会済みユーザー

2016/06/24 04:24

なるほどイベントハンドラは閉じる必要があるのですね！基本、独学で勉強してきていたのでしりませんでした、、、、 ```javascript if(test == "1"){ $("#test1").on("change", function(){ alert("テスト１"); }); $("#test1").off("change"); }else if(test == "2"){ $("#test2").on("change", function(){ alert("テスト2"); }); $("#test2").off("change"); } ``` 書き方はこれであったいるのでしょうか？これだとテスト1、テスト２が動作しなくなってしまうのですが・・

shi_ue

2016/06/24 04:26 編集

いや、削除してから付けようよ。それと、コメントにコードは書かないようにね。質問に追記してください。

yambejp

2016/06/24 04:55

そのロジックだと子要素のselectが増えるといちいちoffしなくちゃいけないので無駄がおおくない？

shi_ue

2016/06/24 04:59

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

think49

2016/06/24 05: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 06:32

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

行動規範の内容に同意します

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

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

投稿2016/06/24 04:52

退会済みユーザー

総合スコア0