Bootstrap 4下拉列表无法显示所选值

Question

I am using Laravel and trying to incorporate simple bootstrap dropdown on one of the blade templates.

The problem I am facing is dropdown gets clicked, shows up all options but when clicked on on of the options, that selected option doesn't get displayed as selected in the dropdown.

I Googled and I can see few posts which say that Jquery.js should be included prior to bootstrap.js

I am using Laravel mix and not sure how can I specify the order of the scripts which will get included in final app.js file (if that is the solution to my problem!)

---

Update: After some research, I find following:

Following dropdown does not work (interestingly even on Bootstrap website 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>

And following does work:

<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>

I added require('../../node_modules/bootstrap-select/dist/js/bootstrap-select'); inside resources/js/app.js

Answer 1

Upgrade to Bootstrap 4.1 +. since 4.0 is crappy and does not work. Even the docs don't work.

Well since this is a short answer, your require is weird. Mix will auto look in your node_modules folder.

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