Я использую select2 для создания поля множественного выбора. Из Python бэкэнда я получаю список компаний и в JavaScript I l oop поверх списка добавляю их к выпадающим вариантам, которые я определил в html.
, который я хочу поле должно быть пустым по умолчанию. Но я не знаю, как инициализировать пустое поле. Что-то всегда выбирается, даже если я оставляю это пустым, как <option selected></option>
.
Если я наберу <option selected>Select something</option>
, это также будет включено в выбор по умолчанию, который мне не нужен.
Как я могу оставить его полностью пустым по умолчанию и при этом иметь возможность добавлять варианты из 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)
})
}