セレクトボックスの値やオプションなどを変更後、Bootstrap の selectpicker で作られた div タグにも反映するには selectpicker('refresh') を使う。

<select name="type">
    <option value="1">1</option>
    <option value="10">10</option>
    <option value="20">20</option>
</select>
<select name="number">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    ...省略...
    <option value="30">30</option>
</select>

<script>
$(function() {
  // typeが変更された際に、numberオプションを差し替える
  $('[name="type"]').on('change', function(){
    // keyがtype、valueがnumberの最小値
    let number_min = {1:1, 10:10, 20:20};
    let type = $('[name="type"] option:selected').val();
    let number = $('[name="number"] option:selected').val();

    if (number_min[type] == null) {
      return;
    }

    // numberのオプションを削除
    $('[name="number"] > option').remove();

    // セレクトボックスにオプションを追加
    for(let i=number_min[type]; i<=30; i++) {
      $('[name="number"]').append($('<option>').html(i).val(i));
    }

    // 元々選択済みだったオプションを選択し直す
    $('[name="number"] option[value="' + number + '"]').prop('selected',true);

    // Bootstrapの要素（divタグ）にも反映
    $('[name="number"]').selectpicker('refresh');
  });
});
</script>