当我尝试动态添加选项以引导可搜索选择时,它是在选择之外添加的。请看截图
如何动态地正确添加选项以引导可搜索的选择项
这是我的代码
<div class="row form-group">
<select class="col form-control selectpicker supplierSelect" data-live-search="true"
title="Select Supplier..." data-size="5">
<option th:each="supplier : ${suppliers}" th:value="${supplier.id}" th:text="${supplier.name}"></option>
</select>
<button type="button" class="btn mb-1 btn-rounded btn-outline-info"
data-toggle="modal" data-target="#addSupplier"><span><i class="fa fa-plus"></i> </span>
</button>
</div>
这是我添加数据的方式
document.querySelector(domStrings.saveSupplierButton).addEventListener('click', function () {
const data = JSON.stringify(uiController.getSupplierData());
console.log(data);
const url = window.location.protocol + "//" + window.location.hostname+":"+window.location.port+"/supplier";
const otherParams = {
headers: {"content-type": "application/json; charset=UTF8"},
body: data,
method: "POST"
};
fetch(url, otherParams)
.then(data=>{return data.json()})
.then(data => {
console.log(data);
let template = '<option value="{optVal}">{text}</option>';
template = template.replace('{optVal}',data['id']).replace('{text}',data['name']);
$(domStrings.supplierSelect).append($.parseHTML(template));
$(domStrings.supplierSelect).selectPicker('refresh');
//fixme
})
.catch(error=>console.log(error))
});
但是这不起作用。我的代码有什么问题。任何帮助将不胜感激
首先检查输入的数据格式是否正确。假设这一点,我将重点介绍接收新数据后用于生成option
标签的技术。当前,每次获取数据时都在使用模板设置变量,将其替换为新值并使用parseHTML
附加到DOM。可以使用ES6字符串文字和$
方法减少它:
$select.append($(`<option value="${i}">${text}</option>`));
我做了一个简单的示例概念:https://codepen.io/geekzolanos-dev/pen/bGdgvqq