将选项动态添加到 Bootstrap 可搜索选择

Question

当我尝试将选项动态添加到 Bootstrap 可搜索选择时，它是在选择之外添加的。请看截图

如何正确地将选项动态添加到 Bootstrap 可搜索选择

这是我的代码

<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>                                                                                                   
    &nbsp;                                                                                                      
    <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))                                                                       
});  

但这不起作用。我的代码有什么问题？

Answer 1

首先检查传入数据的格式是否正确。总结这一点，我将专注于在接收新数据后用于生成option 标签的技术。当前正在每次获取数据时使用字符串设置一个变量，将其替换为新值并使用parseHTML 附加到DOM。可以使用 ES6 字符串文字和 $ 方法来减少它：

$select.append($(`<option value="${value}">${text}</option>`));

我为此做了一个简单的示例概念：https://codepen.io/geekzolanos-dev/pen/bGdgvqq