selectboxの選択で別のselectboxを絞込む方法について

selectboxのAとBがあり、Aの選択でBの内容を絞り込みたいと考えています。

例：
【selectboxA】
<select>

上記のAAAを選択すると、

【selectboxB】
<select>

上記の

<option>[AAA]aaa</option> <option>[AAA]bbb</option> だけが表示される形が理想です。

ページの再読み込みではなく動的に絞り込みたいのですが方法がわからず…
ご教授いただけますでしょうか。

よろしくお願いいたします。

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

回答2件

selectboxBのデフォ値設定が必要ですね
あとはこんなかんじ

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  document.querySelector('[name=A]').addEventListener('change',function(e){
3    var t=e.target;
4    [].forEach.call(document.querySelectorAll('[name=B] option'),function(x,y){
5      var v=t.querySelectorAll('option')[t.selectedIndex].text;
6      var reg=new RegExp("^\["+v+"\]");
7      x.style.display=(t.selectedIndex==0||y==0||x.text.match(reg))?"":"none";
8    });
9    document.querySelector('[name=B]').selectedIndex=0;
10  });
11});

HTML
1<select name="A">
2<option>未選択</option>
3<option>AAA</option>
4<option>BBB</option>
5<option>CCC</option>
6<option>DDD</option>
7</select>
8
9<select name="B">
10<option>---</option>
11<option>[AAA]aaa</option>
12<option>[AAA]bbb</option>
13<option>[BBB]aaa</option>
14<option>[CCC]aaa</option>
15<option>[DDD]aaa</option>
16</select>