I read on many forums that the problem of select and multiselect has been resolved after the beta version of bootstrap 4.

Unfortunately I am unable to display the multiselect as in (bootstrap 3) in (bootstrap 4).

Bootstrap 3 Snippet

$('select').selectpicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.8.1/js/bootstrap-select.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Bootstrap 4 Snippet

$('select').selectpicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

推荐答案

因为bootstrap-select是一个 bootstrap 组件,因此您需要像在V3中一样将其包含在代码中

NOTE: this component only works in since version 1.13.0

$('select').selectpicker();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>

<select class="selectpicker" multiple data-live-search="true">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

Jquery相关问答推荐

添加动态表单后,Select2 消失

如何使用 aria-expanded="true" 更改 CSS 属性

如何用 javascript/jquery 替换 url 参数?

使用 JSONP 时如何捕获 jQuery $.getJSON(或数据类型设置为jsonp的 $.ajax)错误?

使用 jQuery 按文本内容 Select 选项

用 jQuery 模拟按键

如何重新启用 event.preventDefault?

JQuery .hasClass 用于 if 语句中的多个值

模态窗口中的 Twitter Bootstrap Datepicker

在 jquery 中启用/禁用下拉框

单击后如何禁用提交按钮?

如果 iframe src 无法加载,则捕获错误.错误:-拒绝在框架中显示 'http://www.google.co.in/'..

为不同的 node 类型配置jstree右键上下文菜单

Javascript 使用哈希值重新加载页面

如何检测是否安装了 Flash,如果没有,显示一个隐藏的 div 通知用户?

如何在 JavaScript 中的对象数组中查找值?

使用 Jquery 查找父 div 的 id

Google 的 CDN 上的最新 jQuery 版本

在未实现接口 FormData 的对象上调用附加

如何在 ReactJS 中使用 JQuery