Как предварительно выбрать несколько вариантов с помощью jinja2 и select2?

Question

Я пытаюсь восстановить данные из своего db и предварительно выбрать мульти-выбор, используя 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

Я нашел альтернативный способ делать то, что я хотел бы сделать:

В моем питона коде я создаю Dict с данными для создания выбора, то я это:

<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

Интересно, если это потому, что у вас есть несколько элементов с одинаковыми идентификаторами ... попробовать это:

<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 
     }); 
    }); 

Надеюсь это поможет.