动态添加选项以引导可搜索的选择

问题描述 投票:0回答:1

当我尝试动态添加选项以引导可搜索选择时,它是在选择之外添加的。请看截图

Screenshot

如何动态地正确添加选项以引导可搜索的选择项

这是我的代码

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

但是这不起作用。我的代码有什么问题。任何帮助将不胜感激

bootstrap-4 thymeleaf bootstrap-selectpicker select-options
1个回答
0
投票

首先检查输入的数据格式是否正确。假设这一点,我将重点介绍接收新数据后用于生成option标签的技术。当前,每次获取数据时都在使用模板设置变量,将其替换为新值并使用parseHTML附加到DOM。可以使用ES6字符串文字和$方法减少它:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.