Пытаюсь использовать bootstrap -select в раскрывающемся списке

Question

Я разрабатываю сайт с bootstrap, и у меня возникла проблема с выбранным компонентом. Вот код

<tr>
    <td>    
        <div class="textAlignCenter">   
           <select  class="selectpicker" formControlName="maritalSituation">
                <option value="" selected>Situation maritale</option>
                <option value="MARIE">Marié</option>
                <option value="DIVORCE">Divorcé</option>
                <option value="CELIBATAIRE">Célibataire</option>
                <option value="VEUF">Veuf</option>
            </select>
        </div>  
    </td>
</tr>

Я использую bootstrap -select для создания раскрывающегося списка (https://www.npmjs.com/package/bootstrap-select), но он не отображается. Когда я проверяю Firebug, у меня есть следующий класс

select.selectpicker {
    display: none !important;
}

Таким образом, элемент select не отображается. Я не понимаю, потому что я пробовал это со скрипкой, и она работает (https://jsfiddle.net/flamant/3r6kucf8/4/)

Единственный выбор, связанный с классом, в моем приложении:

select {
  @extend input;
}

и когда я его снимаю, ничего не меняется

Answer 1

Может ты что то забыл добавить? Как bootstrap -select JS и CSS, потому что это не стандартные Bootstrap функции, а дополнительная библиотека. Работает отлично. Смотрите, пожалуйста.

$(function () {
    $('.selectpicker').selectpicker();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- needs for bootstrap-select -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>

<!-- bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>

<!-- bootstrap-select additional library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>

<select  class="selectpicker" data-live-search="true">
  <option value="" selected>Situation Maritale</option>
  <option value="MARIE">Marié</option>
  <option value="DIVORCE">Divorcé</option>
  <option value="CELIBATAIRE">Célibataire</option>
  <option value="VEUF">Veuf</option>
</select>