jQuery中的引导选择附加功能

Question

我正在为我的项目使用一个主题。由于主题的 javascript，我遇到了与使用 jQuery 进行选择时附加选项相关的问题。
当我附加一个选项来选择它时，虽然它被添加了，但它并没有显示出来。我发现这是因为在页面加载后在选择上方添加了一个按钮和 div。我正在粘贴 2 个（不同的代码）以供参考：

实际代码
我在 laravel Blade 模板中做的代码

<div class="form-group">
    <select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value">
        <option value="">Contract Types</option>
        @foreach (\App\ContractType::all() as $ct)
        <option value="{{ $ct->id }}">{{ $ct->type }}</option>
        @endforeach
    </select>
</div>

在浏览器中检查的代码
在浏览器中检查元素时的代码

<div class="form-group">
    <div class="btn-group bootstrap-select search-fields open">
        <button type="button" class="btn dropdown-toggle bs-placeholder btn-default" data-toggle="dropdown" role="button" data-id="ct" title="Contract Types" aria-expanded="true">
            <span class="filter-option pull-left">Contract Types</span>&nbsp;
                <span class="bs-caret">
                    <span class="caret"></span>
                </span>
        </button>
        <div class="dropdown-menu open" role="combobox" style="max-height: 590px; overflow: hidden; min-height: 158px;">
            <div class="bs-searchbox">
                <input type="text" class="form-control" autocomplete="off" placeholder="Search value" role="textbox" aria-label="Search">
            </div>
            <ul class="dropdown-menu inner" role="listbox" aria-expanded="true" style="max-height: 543px; overflow-y: auto; min-height: 111px;">
                <li data-original-index="0" class="selected active">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="true">
                        <span class="text">Contract Types</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="1">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Rent</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="2">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Buy</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="3">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Commercial Rent</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
                <li data-original-index="4">
                    <a tabindex="0" class="" data-tokens="null" role="option" aria-disabled="false" aria-selected="false">
                        <span class="text">Commercial Buy</span>
                        <span class="glyphicon glyphicon-ok check-mark"></span>
                    </a>
                </li>
            </ul>
        </div>
        <select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value" tabindex="-98">
            <option value="">Contract Types</option>
            <option value="1">Rent</option>
            <option value="2">Buy</option>
            <option value="3">Commercial Rent</option>
            <option value="4">Commercial Buy</option>                                                                                                    
        </select>
    </div>
</div>

因此，当我尝试使用 jQuery 和另一个选择的 on-change 事件清空选择并将新选项附加到它时：

$('#c').on('change', function(e){
    var id = e.target.value;

    $('#ct').empty();
    $('#ct').append('<option value="">Contract Types</option>');
    $('#ct').append('<option value="1">Rent</option>');
    $('#ct').append('<option value="2">Buy</option>');
    if (id == 1) {
        $('#ct').append('<option value="3">Commercial Rent</option>');
        $('#ct').append('<option value="4">Commercial Buy</option>');
    }
});

它在选择中执行它，但由于阴影按钮和 div 不显示。我已经检查了主题的 JS 页面，但我无法理解整个功能。

Answer 1

对select进行修改后，需要调用

$('#ct').selectpicker('refresh');

如bootstrap-select documentation 中所述。

Answer 2

您是否尝试将 z-index 赋予您的选择元素？

<div class="form-group">
    <select class="selectpicker search-fields" id="ct" name="ct" data-live-search="true" data-live-search-placeholder="Search value" style='z-index:999 !important'>
        <option value="">Contract Types</option>
        @foreach (\App\ContractType::all() as $ct)
        <option value="{{ $ct->id }}">{{ $ct->type }}</option>
        @endforeach
    </select>
</div>