Bootstrap-Select не обновляется на мобильных устройствах

Я использую Bootstrap-select для мультивыбора элементов с Django. Он отлично работает на настольном компьютере, но когда включен мобильный выпадающий список, выбранные значения выпадающего списка не заполняются.

HTML
<!-- start product brand info -->
    <div class="row">
        <div class="col-md-6 col-xs-*">
            <div>
                <label for="id_brand-name" class="form-label">Products</label>
            </div>
            <select multiple class="form-control selectpicker mb-3" id="id_brand-name" name="brand-name" mobile="true" multiple required>
                {% for product in products %}
                <option value="{{product.id}}" id="optiion">{{ product.brand.name | title }} - {{product.name | title}}</option>
                {%endfor%}
            </select>
            <div class="invalid-feedback">
                Select at least one product.
            </div>
        </div>
    </div>
    <!-- end product info -->

<script>
    //Enble native drop down on mobile
    window.onload = function () {
    $('#id_brand-name').selectpicker({
        container: 'body'   
    });

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        $('#id_brand-name').selectpicker('mobile')
    }};
</script>

Независимо от того, сколько элементов выбрано, селектор всегда показывает Nothing selected. Когда данные размещаются, они являются частью формы.

Ex on Mobile

Мне нравится использовать bootstrap-select, но эта проблема беспокоит меня уже долгое время. Похожие вопросы можно найти на github, но идеального ответа нет.

Причина в том, что он всегда будет обновлять свой title, независимо от того, как remove() сделано внешне, и вы не можете изменить его стиль на iphone Safari и Firefox.

Так что мое решение: если вы не можете удалить его, тогда присоединитесь к нему.

Вам необходимо изменить исходный файл: bootstrap-select.js

Поиск: bs-title-option, в следующей строке вы найдете: 

this.selectpicker.view.titleOption.value = '';

И добавьте две строки вниз: 

this.selectpicker.view.titleOption.value = '';
// new add
this.selectpicker.view.titleOption.disabled='true';
this.selectpicker.view.titleOption.textContent=this.options.title;
//

Выполнено

Когда вы используете $('#id_brand-name').selectpicker('mobile')

Текст title отображается на первом пустом варианте, и его нельзя выбрать.

попробуйте!

Вернуться на верх