如何使用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 
     }); 
    }); 

希望這可以幫助。