セレクトボックスの選択によって次の設問を表示する方法（２段階）

Javascript初心者です。
以下のようなフォームを実現したいです。

①セレクトボックス（AorB）
↓
②Bを選択した場合
セレクトッボックス（CorD）
↓
③Dを選択した場合
テキスト入力フォーム

以下のようなコードで試して、
②までは動作したのですが、③は表示がされませんでした。
どなたかご教授いただけますでしょうか。
何卒よろしくお願致します。

html
1
2<select id="q1">
3<option value="A">A</option>
4<option value="B">B</option>
5</select>
6    
7<div class="q1_data" id="B" style="display: none">
8<select id="q2">
9<option value="C">C</option>
10<option value="D">D</option>
11</select>
12</div>
13    
14<div class="q2_data" id="D" style="display: none">
15<input type="text">
16</div>

javascript
1(function(){
2  $('#q1').change(function () {
3    var val = $(this).val();
4    var select_id = '#' + val;
5    $('.q1_data').hide();
6    $(select_id).show();
7  });
8});	
9	
10$(function(){
11  $('#q2').change(function () {
12    var val = $(this).val();
13    var select_id = '#' + val;
14    $('.q2_data').hide();
15    $(select_id).show();
16  });
17});

yambejp

2021/06/14 08:50

AやCを選択したときはどうするのでしょうか？

ymnm

2021/06/14 08:52

お返事ありがとうございます。説明不足で申し訳ございません。 AやCの場合、そこで質問は終わりで、追加の質問はありません。何卒よろしくお願いします。

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

回答1件

ベストアンサー

javascript
1$(function(){
2  $('select').on('change',function(){
3    $('#B').toggle($('#q1').val()=="B");
4    $('#D').toggle($('#q1').val()=="B" && $('#q2').val()=="D");
5  }).trigger('change');
6});