Динамическое добавление параметров в Bootstrap с возможностью поиска - PullRequest
Новая
       23

Динамическое добавление параметров в Bootstrap с возможностью поиска

0 голосов
/ 24 февраля 2020

Когда я пытался динамически добавить опцию в Bootstrap с возможностью поиска, она добавляется за пределы выбора. Пожалуйста, смотрите скриншот

Screenshot

Как правильно добавить параметр динамически в 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))                                                                       
});

, но это не работает. Что не так с моим кодом?

1 Ответ

1 голос
/ 25 февраля 2020

Сначала проверьте, находятся ли входящие данные в адекватном формате. Итак, я бы сосредоточился на технике, используемой для генерации тегов option после получения новых данных. В настоящее время каждый раз при получении данных устанавливается переменная со строкой, которая заменяется новыми значениями и добавляется в DOM с помощью parseHTML. Его можно уменьшить, используя строковые литералы ES6 и метод $: 

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

. Я сделал простой пример концепции: https://codepen.io/geekzolanos-dev/pen/bGdgvqq

...