时间戳

首页 > 解决方案 > Bootstrap 4 下拉菜单无法显示所选值

jquery - Bootstrap 4 下拉菜单无法显示所选值

问题描述

我正在使用 Laravel 并尝试在其中一个刀片模板上合并简单的引导下拉菜单。

我面临的问题是下拉菜单被点击，显示所有选项，但是当点击选项时，所选选项不会显示为下拉菜单中的选择。

我用谷歌搜索，我可以看到一些帖子说Jquery.js应该在之前包含bootstrap.js

我正在使用 Laravel mix，但不确定如何指定将包含在最终app.js文件中的脚本的顺序（如果这是我的问题的解决方案！）

更新： 经过一番研究，我发现以下内容：

以下下拉菜单不起作用（有趣的是，即使在 Bootstrap 网站https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns上）：

        <div>
            <div class="dropdown" id="field-mapping-dropdown">
                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Please select field
                </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                    <a class="dropdown-item" href="#">item 1</a>
                    <a class="dropdown-item" href="#">item 2</a>
                </div>
            </div>
        </div>

以下确实有效：

<div>
    <label for="pillar">Pillar</label>
    <div class="dropdown bootstrap-select margin-left-15px">
        <select name="pillar" id="pillar" class="selectpicker">
            <option value="">Please select</option>
            <option value="">Please select1</option>
            <option value="">Please select2</option>
        </select>
    </div>
</div>

我require('../../node_modules/bootstrap-select/dist/js/bootstrap-select');在里面加了resources/js/app.js

标签： jquerylaravelbootstrap-4laravel-5.8

解决方案

升级到 Bootstrap 4.1 +。因为 4.0 很糟糕并且不起作用。即使是文档也不起作用。

好吧，因为这是一个简短的答案，所以您的要求很奇怪。Mix 将自动在您的 node_modules 文件夹中查找。

import bootstrapSelect from 'bootstrap-select';
//or
require('bootstrap-select');

推荐阅读