Bootstrap 选择样式和搜索不起作用答案

【问题标题】：Bootstrap Select style and search not workingBootstrap 选择样式和搜索不起作用
【发布时间】：2017-10-13 10:14:11
【问题描述】：

我正在尝试将Bootstrap-Select 与搜索功能一起使用。我似乎无法让它工作，我使用 npm install bootstrap-select 安装它，它可以很好地安装@1.12.4 我的 div 和选择代码是：

<div class="form-group">
 <select class="selectpicker" id="sel" name="manufacturer" onchange="man()" data-live-search="true">
  <option selected>Manufacturer</option>
  <option value="cisco">Cisco</option>
  <option value="netgear">NetGear</option>                             
  <option value="other">Other</option>
 </select>
</div>

为什么它不起作用？我错过了什么？

【问题讨论】：

你记得实际包含插件吗？
我在将它包含在我的索引文件ome/ubuntu/workspace/asset-management/node_modules/bootstrap-select/dist/js/bootstrap-select.js:157 _set: $.valHooks.select.set ^ TypeError: Cannot read property 'select' of undefined之后得到了这个@
@ObsidianAge 忘记在之前的评论回复中标记你
当我包含 CDN CSS 和 JS 链接/脚本时，我应该添加它只会使选择消失。它们根本不会出现在浏览器中。
@Naga2Raja 什么 JS 部分？您是否必须为此软件包进行自定义设置？我认为它是安装然后需要，它应该在使用时工作。我唯一的js是var jQuery = require("jquery"); var bootstrapSelect = require("bootstrap-select");

标签： jquery css twitter-bootstrap

【解决方案1】：

这是你需要做的

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />




<div class="container">

  <div class="row">
    <div class="col-xs-12">
      <div class="box">
        <!-- /.box-header -->
        <div class="box-body">
          <form>
            <div class="form-group row">
              <label for="" class="col-sm-2 form-control-label">Country</label>
              <div class="col-sm-10">
                <select class="form-control selectpicker" id="select-country" data-live-search="true">
                <option data-tokens="china">China</option>
                <option data-tokens="malayasia">Malayasia</option>
                <option data-tokens="singapore">Singapore</option>
                </select>

              </div>
            </div>
          </form>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
    <!-- /.col -->
  </div>
  <!-- /.row -->
</div>
<!-- /.container -->

【讨论】：

我试过了，虽然代码 sn-p 有效，但我只能让样式正常工作，即使我直接使用 select you have，下拉菜单也会完全失败。
我将这些包含添加到头文件中，因此加载顺序应该不是问题。
@JoshKirby 顺序无关紧要，但作为一个尝试，我要求您按照与上述相同的顺序放置它。基本上在使用之前调用 js。
我做了我将所有的JS添加到头文件中。您的复制和粘贴失败。您发布的功能位于我的页脚顶部，其他包含在页眉中。
好吧，我玩弄了订单，让他们开始工作。现在唯一的问题是它们是灰色的，就像它们应该被禁用但它们没有被禁用

【解决方案2】：

原因是你没有添加使用 bootstrap-select 的依赖 java 脚本文件。主要是 Bootstrap 的 dropdown.js 组件。

您可以尝试包含以下脚本并执行。

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

【讨论】：

我已经包含了引导程序，我在项目的其他领域使用了 JS 部分。
希望你没有错过 jquery.min.js