Я сгенерировал многократное поле выбора колбой для района.Поле множественного выбора html5 по умолчанию не очень удобно.Изображение: Поле множественного выбора по умолчанию
Поэтому я хотел добавить Select2 для поля, но это выглядит неправильно:
Изображение: Пустое поле множественного выборас Select2
Изображение: Поле множественного выбора с Select2 с районами
HTML-шаблон:
...
<select
{% if filter.multiple %}
id="{{filter.type}}_{{filter.multiple}}_{{filter.select.table}}"
name="{{filter.type}}_{{filter.multiple}}_{{filter.select.table}}"
multiple="multiple"
{% else %}
id="{{filter.type}}_{{filter.select.table}}"
name="{{filter.type}}_{{filter.select.table}}"
{% endif %}
data-column="{{ filter.select.table }}_{{ filter.return }}">
{% for s in filter.for_select %}
<option value="{{ s.value }}">{{ s.text }}</option>
{% endfor %}
</select>
...
<script type="text/javascript">
$(document).ready(function() {
$("[name*='select_multiple']").select2();
});
</script>
....
Наконец, страница HTML:
....
<select
id="select_multiple_district"
name="select_multiple_district"
multiple="multiple"
data-column="district_name">
<option value="Адмиралтейский">Адмиралтейский</option>
<option value="Василеостровский">Василеостровский</option>
<option value="Выборгский">Выборгский</option>
<option value="Калининский">Калининский</option>
<option value="Кировский">Кировский</option>
<option value="Колпинский">Колпинский</option>
<option value="Красногвардейский">Красногвардейский</option>
<option value="Красносельский">Красносельский</option>
<option value="Кронштадтский">Кронштадтский</option>
<option value="Курортный">Курортный</option>
<option value="Московский">Московский</option>
<option value="Невский">Невский</option>
<option value="Петроградский">Петроградский</option>
<option value="Петродворцовый">Петродворцовый</option>
<option value="Приморский">Приморский</option>
<option value="Пушкинский">Пушкинский</option>
<option value="Фрунзенский">Фрунзенский</option>
<option value="Центральный">Центральный</option>
</select>
...
<script type="text/javascript">
$(document).ready(function() {
$("[name*='select_multiple']").select2();
});
</script>
...