在 bootstrap multi select 中首先显示 selected 选项

Question

这是我的 bootstrap 多 select "div"。现在可以正常使用了。

我的问题是，如果用户 select 编辑了 select 框中的值，是否有机会首先显示 select 编辑的值。因为我的 select 框中有 700 多个行业。所以我想给用户显示 selected Industry 应该先显示。

例如：我希望首先显示 Acute Care 和 Acute Care-Outpatient。

<div class="col-12 col-sm-4">
    <div class="form-group">
        <p>Industry<span class="notice-txt">*</span></p>
        <select name="industry[]" class="selectpicker selectpkrTrigger" multiple id="industry">
            <option value="" disabled >--Select--</option>
            @foreach($industrys as $in)
                <option value="{{$in['industrykey']}}" >{{$in['industry']}}</option>
            @endforeach
        </select>
    </div>
</div>

Answer 1

没有 css 解决方案来改变 <option> 项的顺序，但是，使用 javascript 可以实现您想要的。下面是一个示例值。

$(document).ready(function() {
    $('#industry').on('change', function() {
        var note = $(this).find('option').first(),// the '--Select--' option
            selected = $(this).find('option:selected'),
            rest = $(this).find('option:not(:first-of-type):not(:selected)');
        
        var sorter = (a, b) => {
            let aName = a.innerText.toLowerCase(),
                bName = b.innerText.toLowerCase();
            return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
        };

        $(this)
            // adding '--Select--' 
            .html(note)
            // appending selected options sorted in alphabetical order
            .append(selected.sort(sorter))
            // adding the rest of the options sorted too
            .append(rest.sort(sorter));
    });
});

<div class="col-12 col-sm-4">
    <div class="form-group">
        <p>Industry<span class="notice-txt">*</span></p>
        <select id="industry" name="industry[]" class="form-control" multiple>
            <option value="" disabled >--Select--</option>
            <option value="01">A</option>
            <option value="02">B</option>
            <option value="03">C</option>
            <option value="04">D</option>
            <option value="05">E</option>
            <option value="06">F</option>
            <option value="07">G</option>
            <option value="08">H</option>
        </select>
    </div>
</div>


<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

在 bootstrap multi select 中首先显示 selected 选项

Show selected options first in bootstrap multi select

jquery

twitter-bootstrap

bootstrap-4

laravel-5.3