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

Posted 2023-05-07

【中文标题】如何使用 jinja2 和 select2 预先选择多个选项？

【英文标题】：How to pre select multiple options using jinja2 and 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 保留数据会更好吗？

【参考方案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
    );