Question

这是我的bootstrap multiselect＆＃34; div＆＃34;。现在它正常运作。

我的问题是，如果用户从选择框中选择了值，是否有机会首先显示所选值。因为我的选择框中有超过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>项的顺序，但是，使用javascript可以实现你想要的。以下是示例值的示例。

＆＃13;

$(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));
    });
});

＆＃13;

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

＆＃13;

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

1 个答案: