選択肢によって追加の選択肢を表示させる場合に後方（部分）一致で指定したい

Question

<select name="animal-usagi">
 <option value="top" class="not-select">選択</option>
 <option value="白うさぎ(大人)">白うさぎ(大人)</option>
 <option value="白うさぎ(子供)">白うさぎ(子供)</option>
 <option value="黒うさぎ(大人)">黒うさぎ(大人)</option>
 <option value="黒うさぎ(子供)">黒うさぎ(子供)</option>
</select>

<select name="animal-panda">
 <option value="top" class="not-select">選択</option>
 <option value="パンダ(大人)">パンダ(大人)</option>
 <option value="パンダ(子供)">パンダ(子供)</option>
</select>

<div id="#choice" class="none">
 <p>大人を選択した場合のみ表示させる</p>
 <input type="checkbox" name="choice" id="choice01" value="1">
 <input type="checkbox" name="choice" id="choice02" value="2">
</div>

  $('select[name^=animal]').change(function() {
    if ($('select[name="usagi"] option:selected').val() == '白うさぎ(大人)') $('#choice').css('display','table-row');
    else if ($('select[name="panda"] option:selected').val() == 'パンダ(大人)') $('#choice').css('display','table-row');
    else $('#choice').css('display','none');
  }); 

複数のセレクトボックスが並んでおり、特定の項目を選択した場合にのみ追加の選択肢を表示させたいです。
それ事態は上記コードで実現できるのですが、実際はセレクトボックスもその中の選択肢もかなりの数があり、この方法で記述するとなると else ifを延々と増やさねばならずかなり手間がかかります。
後方一致などでどうにかして
「nameにanimalが入っているセレクトボックス」で「valueの後方に(大人)が入っているもの」が選択された場合は表示させる
と一括指定する方法はないでしょうか？

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

Answer 1

<div id="#choice"

「id="choice"」にした方がよいでしょう
めんどうなのでselectにもanimalクラスをつけておきます

<script>
$(function(){
 $('.animal').on('change',function() {
   $('#choice').toggle($('.animal').map(function(){
     return /大人/.test($(this).val());
   }).get().includes(true));
 }).eq(0).trigger('change');
});
</script>
<select name="animal-usagi" class="animal">
 <option value="top" class="not-select">選択</option>
 <option value="白うさぎ(大人)">白うさぎ(大人)</option>
 <option value="白うさぎ(子供)">白うさぎ(子供)</option>
 <option value="黒うさぎ(大人)">黒うさぎ(大人)</option>
 <option value="黒うさぎ(子供)">黒うさぎ(子供)</option>
</select>

<select name="animal-panda" class="animal">
 <option value="top" class="not-select">選択</option>
 <option value="パンダ(大人)">パンダ(大人)</option>
 <option value="パンダ(子供)">パンダ(子供)</option>
</select>

<div id="choice" class="none">
 <p>大人を選択した場合のみ表示させる</p>
 <input type="checkbox" name="choice" id="choice01" value="1">
 <input type="checkbox" name="choice" id="choice02" value="2">
</div>

Comments

[warabiya]

無事に希望通りの動きを実現できました。
ありがとうございます！