###前提・実現したいこと
ある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("テスト1"); 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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。