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

Question

我试图从我的数据库重新获取数据，并使用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保留数据会更好吗？

Answer 1

我发现这样做的另一种方式是我想做的事：

在我的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> 

希望这可以帮助未来的人。

然后我初始化选择2：

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

Answer 2

我不知道是否是因为你有相同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 
     }); 
    }); 

希望这可以帮助。