包含数据表时,引导选择不会下拉

Posted

技术标签:

【中文标题】包含数据表时,引导选择不会下拉【英文标题】:Bootstrap select won't dropdown when datatables is included 【发布时间】:2018-07-01 04:45:04 【问题描述】:

我正在尝试使用Bootstrap select,这有效,但仅适用于未加载datatables 的页面。问题是当我单击引导程序选择时,它不会将 aria 扩展为 true,奇怪的是:当我单击选择按钮并按下键盘上的一个键时,它会触发按钮并展开它。

我不知道是否有快速解决此问题的方法,否则 datatables 和 Bootstrap select 将无法一起使用。

我的代码:

  <!--  // Header cdns
     DataTables -->
 <link rel="stylesheet" href=" asset('vendor/adminlte/plugins/datatables/dataTables.bootstrap.min.css') ">

 <!-- Bootstrap-Select -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
   
<!--  // select button -->
  <select data-live-search="true" name="stores" id="stores" class="form-control selectpicker">
       <option value="1" data-content="Amsterdam"></option>
   </select>

<!-- // footer cdns
  Bootstrap-Select -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
 
 <!-- DataTables -->
 <script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>
 <script type="text/javascript" src="https://www.datatables.net/plug-ins/i18n/Dutch"></script>

请注意,这不是我的完整代码,而只是其中的重要部分。

【问题讨论】:

检查器/控制台中是否报告了任何错误? 什么都没有 表格内是否有 Bootstrap Select 控件? 我正在为其他东西构建一个示例,因此决定尝试使用 Bootstrap 选择。 Aria-expanded 似乎在表数据内的表外的两个输入中都能正常工作。看看:live.datatables.net/yaviyoce/1/edit 好吧,由于某种原因,它对我不起作用。也许是因为我没有用 jquery 附加它 【参考方案1】:

所以解决方法很简单,我是在 bootstrap.js 文件之前加载的。。需要在 bootstrap.js 文件之后加载。

【讨论】:

我很困惑。你是在 bootstrap.js 之前还是之后加载的?

以上是关于包含数据表时,引导选择不会下拉的主要内容,如果未能解决你的问题,请参考以下文章

如何在数据库中插入引导下拉值

Twitter引导导航栏和下拉菜单-不调整大小

如果选择标题而不是值,则 Breeze/Knockout 下拉值不会在数据库中更新

增加引导下拉菜单宽度

使用 Bootstrap Selectpicker 的搜索框下拉菜单不起作用

选择日期后引导日期选择器不会自动关闭