不能使用filter，使用select2（）;

Question

我无法在jquery中使用过滤器的情况下，我尝试了很多代码，但是没有用，在那之后，我之前创建了我的第一个问题，并且绝对地工作，但是“使用delete select2（）; function”，在这里我的代码专家。

$('.select2').select2();
var $options = $('#animals option');

$('#class').on('change', function() {
  var animal = $(this).val();
  $('#animals').prop("selectedIndex", 0);
  if (animal == '') {
    $options.show();
  } else {
    $options.hide().filter(function() {
      return $(this).data('animal_class') == animal;
    }).show();
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select id="class" class="select2">
  <option value=""></option>
  <option value="1">Mammals</option>
  <option value="2">Birds</option>
  <option value="3">Reptiles</option>
</select>

<select id="animals" class="select2">
  <option value=""></option>
  <option value="11" data-animal_class="1">Cow</option>
  <option value="12" data-animal_class="1">Sheep</option>
  <option value="13" data-animal_class="1">Bear</option>
  <option value="21" data-animal_class="2">Parrot</option>
  <option value="22" data-animal_class="2">Pigeons</option>
  <option value="23" data-animal_class="2">Bear</option>
  <option value="31" data-animal_class="3">Crocodile</option>
  <option value="32" data-animal_class="3">Lizard</option>
  <option value="33" data-animal_class="3">Turtle</option>
</select>