尝试对我的下拉菜单使用bootstrap-select [英] Trying to use bootstrap-select for my dropdown
问题描述
我使用引导程序开发了一个站点,但是选择组件遇到了问题.这是代码
I develop a site with bootstrap and I am facing an issue with a select component. Here is the code
<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时,我有以下课程
I use bootstrap-select to design the dropdown (https://www.npmjs.com/package/bootstrap-select), but it does not appear. When I inspect Firebug, I have the following class
select.selectpicker {
display: none !important;
}
因此select元素不可见.我不明白,因为我用小提琴尝试过,并且可以正常工作( https://jsfiddle.net/flamant/3r6kucf8/4/)
So the select element is not visible. I don't understand, because I tried it with fiddle and it works (https://jsfiddle.net/flamant/3r6kucf8/4/)
在我的应用程序中,唯一与select相关的类是
The only class related select in my application is the following
select {
@extend input;
}
当我将其删除时,没有任何变化
and when I remove it nothing change
推荐答案
也许您忘了添加一些内容?与 bootstrap-select JS和CSS类似,因为它不是标准的Bootstrap函数,而是附加库.工作良好.请看.
Maybe you forgot to add something? Like bootstrap-select JS and CSS, because it is not standard Bootstrap functions, but an additional library. Works fine. Look please.
$(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>
这篇关于尝试对我的下拉菜单使用bootstrap-select的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!