mw wp formでチェックボックスで都道府県を選択すると、次のチェックボックスで市町村が自動で表示されるようにしたい

前提・実現したいこと

https://teratail.com/questions/341229
上記を参考にしてやりましたが、上記のやり方で単にif文と変数を追加しただけでは、上手く動かず、青森県にチェックが入った時にだけ値が変更され、北海道が「選択してください」となってしまいます。
どなたか解決策が分かる方がいらっしゃいましたら、教えていただけないでしょうか？

form.html
1<tr>
2<th>都道府県</th>
3<td>
4[mwform_select name="area-1" children=":選択してください,北海道,青森県" post_raw="true" id="cate_select"]
5
6<div id="category_a" class="form-child">
7[mwform_select name="city-1-2" children=":選択してください,札幌市,函館市" post_raw="true"]
8</div>
9<div id="category_c" class="form-child">
10[mwform_select name="city-1-3" children=":選択してください,青森市,弘前市" post_raw="true"]
11</div>
12 <div id="category_b" class="form-child"> 
13[mwform_select name="city-1-1" children=":選択してください" post_raw="true"]
14</div>
15</td>
16</tr>
17<tr>

script.js
1$(function(){
2    $(".form-child").css({"display":"none"});
3
4    $("#cate_select").on("change", function() {
5        var val = $(this).val();
6
7        if (val === '北海道'){
8            $(".form-child").css({"display":"none"});
9            $("#category_a").fadeIn();
10
11        }
12        if (val === '青森県'){
13          $(".form-child").css({"display":"none"});
14          $("#category_c").fadeIn();
15
16      }
17        else {
18            $(".form-child").css({"display":"none"});
19            $("#category_b").fadeIn();
20
21        }
22    });
23
24    var selectedA = $('#cate_select option[value="北海道"]').prop('selected');
25    var inputVal = $('#cate_select').find('input[type="hidden"]').val();
26    var selectedC = $('#cate_select option[value="青森県"]').prop('selected');
27    var inputVal = $('#cate_select').find('input[type="hidden"]').val();
28
29    if(selectedA || inputVal === '北海道'){
30        $("#category_a").show();
31    }
32    if(selectedC || inputVal === '青森県'){
33      $("#category_c").show();
34  }
35    else {
36        $("#category_b").show();
37    }
38});