Основы CSS & jQuery Select2

Question

Я пытаюсь интегрировать jQuery Select2 с Zurb Foundation CSS, и у меня проблемы.

Мне нужна возможность указать элемент, который будет использоваться для хранения выбранных вариантов для множественного выбора. Этот элемент должен быть отдельным, чем элемент, содержащий поле ввода ввода.

На рисунке ниже показаны две строки фундамента CSS, каждая строка имеет два столбца (кроме строки заголовка «Страна»). Ярлык слева слева и столбец справа. Прямо сейчас изображение ниже НЕ интегрировано с Select2.

Я пытаюсь реализовать ВЫБ.2 в пути, где он будет отображаться так же, как на скриншоте ниже. (Примечание: я, очевидно, вручную отредактировал HTML для отображения в этом формате).

Окончательный HTML структуру, что я пытаюсь добиться ниже.

<div class="select2-container select2-container-multi row"> 
<ul class="select2-choices"> 
<li class="select2-search-choice"></li> 
... 
</ul> 
</div> 
<div class="small-3 columns">my label</div> 
<div class="small-9 columns"> 
<div class="select2-search-field"></div> 

Мой вопрос, как можно достичь макет, который во втором изображении, в частности, говоря JQuery ВЫБ.2, где поместить список выбранных вариантов и куда поместить окно поиска?

Answer 1

Было несколько человек, которые уже приложили некоторые усилия для интеграции фундамента5 и select2. Может быть, помощь cviebrock может помочь? https://gist.github.com/cviebrock/8056741.

Если вы ищете альтернативную задачу. Рой Маккензи, специальный плагин: http://roymckenzie.github.io/foundation-select/