jquery - 在 Bootstrap 多重选择中首先显示选定的选项

Question

这是我的 Bootstrap 多选“div”。现在可以正常运行了。

我的问题是，如果用户从选择框中选择了值，是否有机会首先显示所选值。因为我的选择框中有超过 700+ 个行业。所以我想显示用户选择的行业应该首先显示。

例如:我希望首先显示急性护理和急性护理门诊。

<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> 的顺序items，然而，使用 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"/>