複数のセレクトボックスの値を取得して、条件分岐で指定した値を表示させたい

複数のセレクトボックスの値を取得して、条件分岐で指定した値を表示させたいのですが、
一番最初に条件分岐で指定した値しか表示されません。
（3つのセレクトボックスは、連動して中身を変えています。）
何が間違っているのか、わかる方は教えていただけませんでしょうか？

HTML
1<div class="pulldownset">
2    <label for="" name="lv1">滞在タイプ</label>
3    <select name="lv1" id="lv1Pulldown">
4        <option value="0" selected="selected">▼選択</option>
5        <option value="1">休憩</option>
6        <option value="2">宿泊</option>
7        <option value="3">フリータイム</option>
8    </select>
9    
10    <label for="" name="lv2">曜日指定</label>
11    <select name="lv2" id="lv2Pulldown" disabled="disabled">
12        <option value="0">▼選択</option>
13        <option value="4" class="p1">月〜金・祝前日</option>
14        <option value="5" class="p1">土・日・祝日</option>
15        <option value="6" class="p2">月〜木・日・祝日</option>
16        <option value="7" class="p2">金・土・祝前日</option>
17        <option value="8" class="p3">月〜金・祝前日</option>
18        <option value="9" class="p3">土・日・祝日</option>
19    </select>
20    
21    <label for="" name="lv3">時間指定</label>
22    <select name="lv3" id="lv3Pulldown" disabled="disabled">
23        <option value="0">▼選択</option>
24        <option value="10" class="p4">-</option>
25        <option value="11" class="p5">-</option>
26        <option value="12" class="p6">21:00〜翌10:00</option>
27        <option value="13" class="p7">21:00〜翌10:00</option>
28        <option value="14" class="p8">6:00〜15:00</option>
29        <option value="15" class="p8">13:00〜25:00</option>
30        <option value="16" class="p9">6:00〜15:00</option>
31        <option value="17" class="p9">13:00〜17:00</option>
32    </select>
33    <input type="button" value="ボタン" class="select-button">
34    <div class="answer-area">
35        <p class="answer-select">料金を表示する</p>    
36    </div>
37    
38</div>

javascript
1$(document).ready(function(){
2 
3    // プルダウンのoption内容をコピー
4    var pd2 = $("#lv2Pulldown option").clone();
5    var pd3 = $("#lv3Pulldown option").clone();
6 
7    // 1→2連動
8    $("#lv1Pulldown").change(function () {
9        // lv1のvalue取得
10        var lv1Val = $("#lv1Pulldown").val();
11 
12        // lv2Pulldownのdisabled解除
13        $("#lv2Pulldown").removeAttr("disabled");
14 
15        // 一旦、lv2Pulldownのoptionを削除
16        $("#lv2Pulldown option").remove();
17 
18        // (コピーしていた)元のlv2Pulldownを表示
19        $(pd2).appendTo("#lv2Pulldown");
20 
21        // 選択値以外のクラスのoptionを削除
22        $("#lv2Pulldown option[class != p"+lv1Val+"]").remove();
23 
24        // 「▼選択」optionを先頭に表示
25        $("#lv2Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
26 
27        // lv3Pulldown disabled処理
28        $("#lv3Pulldown").attr("disabled", "disabled");
29        $("#lv3Pulldown option").remove();
30        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
31    });
32 
33    // 2→3連動
34    $("#lv2Pulldown").change(function () {
35        // lv2のvalue取得
36        var lv2Val = $("#lv2Pulldown").val();
37 
38        // lv3Pulldownのdisabled解除
39        $("#lv3Pulldown").removeAttr("disabled");
40 
41        // 一旦、lv3Pulldownのoptionを削除
42        $("#lv3Pulldown option").remove();
43 
44        // (コピーしていた)元のlv3Pulldownを表示
45        $(pd3).appendTo("#lv3Pulldown");
46 
47        // 選択値以外のクラスのoptionを削除
48        $("#lv3Pulldown option[class != p"+lv2Val+"]").remove();
49 
50        // 「▼選択」optionを先頭に表示
51        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
52    });
53    
54$(function(){
55$('select#lv1Pulldown,select#lv2Pulldown,select#lv3Pulldown').change(function(){
56            var num1 = $('#lv1Pulldown').val();
57            var num2 = $('#lv2Pulldown').val();
58            var num3 = $('#lv3Pulldown').val();
59            $('.select-button').click(function(){
60        if((num1==1)&&(num2==4)&&(num3==10)){
61            $('.answer-select').text('3200円');
62            }else if((num1==1)&&(num2==5)&&(num3==11)){
63              $('answer-select').text('3600円');
64            }else if((num1==2)&&(num2==6)&&(num3==12)){
65              $('answer-select').text('5200円');
66            }else if((num1==2)&&(num2==7)&&(num3==13)){
67              $('answer-select').text('6800円');
68            }else if((num1==3)&&(num2==8)&&(num3==14)){
69              $('answer-select').text('3800円');
70            }else if((num1==3)&&(num2==8)&&(num3==15)){
71              $('answer-select').text('3800円');
72            }else if((num1==3)&&(num2==9)&&(num3==16)){
73              $('answer-select').text('4800円');
74            }else if((num1==3)&&(num2==9)&&(num3==17)){
75              $('answer-select').text('4800円');
76            }
77        })
78    });
79  });
80});

退会済みユーザー

2020/02/10 06:19 編集

webブラウザの開発ツールやデベロッパーツールの、コンソール上に、javascriptのエラーメッセージは出ていませんか？

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

回答2件

難しく考えすぎのような気がしますが……

js
1/// lv1 の <select> の値をもとに lv2, lv3 の <option> を操作する
2function updateLv2Pulldown(lv1Val) {
3  currentLv2Val = $('#lv2Pulldown').val('0');
4  currentLv3Val = $('#lv3Pulldown').val('0');
5  redrawOptions('#lv2Pulldown > option', 'p' + lv1Val);
6}
7
8/// lv2 の <select> の値をもとに lv3 の <option> を操作する
9function updateLv3Pulldown(lv2Val) {
10  currentLv3Val = $('#lv3Pulldown').val('0');
11  redrawOptions('#lv3Pulldown > option', 'p' + lv2Val);
12}
13
14/** lvX の <option> を描画し直す
15 * @param [string] optionsQuery      lvX の <option> を指すクエリ
16 * @param [string] expectedClassName lvX の <option> のうち、表示する項目のクラス名
17 */
18function redrawOptions(optionsQuery, expectedClassName) {
19  $(optionsQuery).each(function(idx, opt) {
20    const isHidden = opt.className !== expectedClassName;
21    opt.disabled = isHidden;
22    opt.style.display = isHidden? 'none' : '';
23  });
24}
25
26$(document).ready(function() {
27  // 初期化
28  updateLv2Pulldown('0');
29  updateLv3Pulldown('0');
30
31  // change イベントハンドラをセット
32  $('#lv1Pulldown').change(function() { updateLv2Pulldown($(this).val()); });
33  $('#lv2Pulldown').change(function() { updateLv3Pulldown($(this).val()); });
34
35  // ボタンの click イベントハンドラをセット
36  $('.select-button').click(function() {
37    let result = '';
38    switch($('#lv3Pulldown').val()) {
39      case '10': result = '3200円'; break;
40      case '11': result = '3600円'; break;
41      case '12': result = '5200円'; break;
42      case '13': result = '6800円'; break;
43      case '14': 
44      case '15': result = '3800円'; break;
45      case '16': 
46      case '17': result = '4800円'; break;
47      default: return;
48    }
49
50    $('.answer-select').text(result);
51  });
52});

投稿2020/02/10 06:55

thyda.eiqau

総合スコア2982

自己解決

自己解決できました！

javascript
1$(document).ready(function(){
2 
3    // プルダウンのoption内容をコピー
4    var pd2 = $("#lv2Pulldown option").clone();
5    var pd3 = $("#lv3Pulldown option").clone();
6 
7    // 1→2連動
8    $("#lv1Pulldown").change(function () {
9        // lv1のvalue取得
10        var lv1Val = $("#lv1Pulldown").val();
11 
12        // lv2Pulldownのdisabled解除
13        $("#lv2Pulldown").removeAttr("disabled");
14 
15        // 一旦、lv2Pulldownのoptionを削除
16        $("#lv2Pulldown option").remove();
17 
18        // (コピーしていた)元のlv2Pulldownを表示
19        $(pd2).appendTo("#lv2Pulldown");
20 
21        // 選択値以外のクラスのoptionを削除
22        $("#lv2Pulldown option[class != p"+lv1Val+"]").remove();
23 
24        // 「▼選択」optionを先頭に表示
25        $("#lv2Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
26 
27        // lv3Pulldown disabled処理
28        $("#lv3Pulldown").attr("disabled", "disabled");
29        $("#lv3Pulldown option").remove();
30        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
31    });
32 
33    // 2→3連動
34    $("#lv2Pulldown").change(function () {
35        // lv2のvalue取得
36        var lv2Val = $("#lv2Pulldown").val();
37 
38        // lv3Pulldownのdisabled解除
39        $("#lv3Pulldown").removeAttr("disabled");
40 
41        // 一旦、lv3Pulldownのoptionを削除
42        $("#lv3Pulldown option").remove();
43 
44        // (コピーしていた)元のlv3Pulldownを表示
45        $(pd3).appendTo("#lv3Pulldown");
46 
47        // 選択値以外のクラスのoptionを削除
48        $("#lv3Pulldown option[class != p"+lv2Val+"]").remove();
49 
50        // 「▼選択」optionを先頭に表示
51        $("#lv3Pulldown").prepend('<option value="0" selected="selected">▼選択</option>');
52    });
53    
54    $(function(){
55        $('select#lv3Pulldown').change(function(){
56            var num3 = $(this).val();
57            if(num3=='10'){
58                $('.answer-select').text('3200円');
59            }else if(num3=='11'){
60                $('.answer-select').text('3600円');
61            }else if(num3=='12'){
62                $('.answer-select').text('5200円');
63            }else if(num3=='13'){
64                $('.answer-select').text('6800円');
65            }else if(num3=='14'){
66                $('.answer-select').text('3800円');
67            }else if(num3=='15'){
68                $('.answer-select').text('3800円');
69            }else if(num3=='16'){
70                $('.answer-select').text('4800円');
71            }else if(num3=='17'){
72                $('.answer-select').text('4800円');
73            }
74        })
75    });
76});