尝试对我的下拉菜单使用 bootstrap-select答案

【问题标题】：Trying to use bootstrap-select for my dropdown尝试对我的下拉菜单使用 bootstrap-select
【发布时间】：2020-09-12 07:21:59
【问题描述】：

我使用引导程序开发了一个网站，但我遇到了一个选择组件的问题。这是代码

<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;
}

所以选择元素是不可见的。我不明白，因为我用 fiddle 试过了，它可以工作 (https://jsfiddle.net/flamant/3r6kucf8/4/)

我的应用程序中唯一与类相关的选择如下

select {
  @extend input;
}

当我删除它时，什么都没有改变

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4 bootstrap-select

【解决方案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>

【讨论】：

嗨 focus.style，我只是忘了添加 $(function () { $('.selectpicker').selectpicker(); });谢谢