Как инициализировать выпадающий список select2 с пустым полем - PullRequest
0 голосов
/ 01 мая 2020

Я использую select2 для создания поля множественного выбора. Из Python бэкэнда я получаю список компаний и в JavaScript I l oop поверх списка добавляю их к выпадающим вариантам, которые я определил в html.

, который я хочу поле должно быть пустым по умолчанию. Но я не знаю, как инициализировать пустое поле. Что-то всегда выбирается, даже если я оставляю это пустым, как <option selected></option>.

It looks like this when I don't enter anything in

Если я наберу <option selected>Select something</option>, это также будет включено в выбор по умолчанию, который мне не нужен. enter image description here

Как я могу оставить его полностью пустым по умолчанию и при этом иметь возможность добавлять варианты из JavaScript? (то, что я хочу, должно выглядеть как this , но варианты выбора отличаются, поэтому я не могу скопировать это решение)

Вот мои коды.

html

 <form>
     <div class="form-group">
         <label>Airline companies</label>
             <p>
                 <select class="js-example-basic-multiple" id="companies" name="states[]" multiple="multiple" style="width: 50%">
                     <option selected></option>
                 </select>
            </p>
     </div>
     <button  class="btn btn-primary" type='button' id="button">Refresh</button>
 </form>

JavaScript

setFilterOptions();

function setFilterOptions(){
    /* function to get distinct values of companies and insert them in the dropdowns */
    let headers = new Headers()
    let init = {
        method : 'GET',
        headers : headers
    }

    let url = getWebAppBackendUrl('/get_filter_values') 
    /* this returns a json {'companies': companies_list} from a Python backend */
    /* companies_list is a list of companies which will eventually appear in the dropdown */

    let promise = fetch(url, init) 
                   .then(function(response){ 
                       response.json()
                               .then(function(data){
                                let companiesList = data.companies;
                                addOptions('companies', companiesList);                                
                                })
                   });                       
}

function addOptions(id, itemList){
    /* function to add company choice to the dropdowns */
    itemList.forEach(function(value, index){
        let option = document.createElement('option');
        option.text = value;
        document.getElementById(id).appendChild(option)
    })
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...