我正在为我的项目使用主题。由于主题的 javascript,我面临与使用 jQuery 在选择中附加选项相关的问题。
当我附加一个选项来选择时,尽管已添加,但它不会显示。我发现这是因为页面加载后在 select 上方添加了一个按钮和 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>
<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 页面,但我无法理解整个功能。
最佳答案
关于javascript - jQuery 中的 Bootstrap 选择附加功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49014969/