如何使用 jinja2 和 select2 预先选择多个选项？答案

【问题标题】：How to pre select multiple options using jinja2 and select2?如何使用 jinja2 和 select2 预先选择多个选项？
【发布时间】：2014-01-04 23:07:27
【问题描述】：

我正在尝试从我的数据库中获取数据并使用 select2 和 jinja2 预先选择多选。

我的 jija2/html 代码：

<span class="input-group-addon">Relocate Where</span>
        {% if not context.relocate_to %}
            <input class="form-control" id="relocate_to" value="" type="hidden" name="relocate_to" data-placeholder="Choose province" />
        {% else %}
            {% for v in context.relocate_to|batch(9, '&nbsp;') %}
                <input class="form-control" id="relocate_to" value="{{v}} " type="hidden" name="relocate_to" data-placeholder="Choose province" />
            {% endfor %}
        {% endif %}

我的 Js：

$.getJSON("{{'provinces.json'|route_url}}").success(function(data) {
        $("#relocate_to").select2({
            data:data,
            multiple: true
        maximumSelectionSize: 9
        });
    });

这只会用1个标签填充多选，这是错误的，因为该用户的数据库中有2个Provinces，并且可以选择9个省份。

我看过这些question，但对我帮助不大。

如何实现使用 jinja2 和 select2 保留数据的目标？

使用 jQuery 保留数据会更好吗？

【问题讨论】：

标签： jquery select jinja2 retain

【解决方案1】：

我想知道是不是因为您有多个具有相同 id 的元素... 试试这个：

<input class="form-control" id="relocate_to_{{ loop.index }}" value="{{v}} " type="hidden" name="relocate_to" data-placeholder="Choose province" />

您还需要 getElementsByName 为您的 js...

$.getJSON("{{'provinces.json'|route_url}}").success(function(data) {
        $("[name=relocate_to]").select2({
            data:data,
            multiple: true
        maximumSelectionSize: 9
        });
    });

希望这会有所帮助。

【讨论】：

感谢您对我的问题的答复。它不起作用，它的作用相同：/.我找到了另一种方法。如果你愿意，一个更简单的方法。不使用js...看我的回答。

【解决方案2】：

我找到了另一种方法来做我想做的事：

在我的 python 代码中，我使用数据创建一个字典来创建选择，然后我这样做：

<span class="input-group-addon">relocate to</span>
    <select name="relocate_to" id="relocate_to" multiple="" class="form-control">
        {% for k, v in relocate_list.iteritems() %} <!-- relocate_list was a list, is now a dictionary -->
            {% if k in context.relocate_to %}
                <option value="{{ k }}" selected="">{{ v }}</option> 
            {% else %}
                <option value="{{ k }}">{{ v }}</option>
            {% endif %}
        {% endfor %}
    </select>

我希望这可以帮助将来的人。

那我就初始化select2：

$("#relocate_to").select2({
        maximumSelectionSize : 9
    });

【讨论】：