具有Select2的多重选择字段不显示下拉列表，而显示在标记列表标记中

Question

我已经按烧瓶为区域生成了多个选择字段。默认的html5多重选择字段不好用。 图片：Default multi select field

所以我想为字段添加Select2，但这看起来不正确：

图片：Empty multi select field with Select2

图片：Multi select field with Select2 with districts

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>
...