Select2 не загружается в шаблон. [Метеор + Пламя] - PullRequest
Новая
       40

Select2 не загружается в шаблон. [Метеор + Пламя]

0 голосов
/ 30 апреля 2018

Прежде чем пометить дубликат вопроса, я хочу пояснить, что я уже перепробовал все возможные способы (например, здесь ), чтобы просто загрузить выпадающий список select2 на простую страницу в Meteor.

Ниже приведен простой код для понимания моей процедуры применения select2.

ManageRoles.js 

Template.ManageRoles.onRendered(function() {
    $(".roleSelect").select2();
});

ManageRoles.html 

<form class="assignRoleForm">                              
    <div class="row">
        <div class="col-sm-12">
            <label>Roles</label>
            <select class="roleSelect form-control" multiple="multiple" required>
                <option value="">Select Option</option>
                <option value="1">ADMIN</option>
                <option value="2">MANAGER</option>
            </select>
        </div>
    </div>
    <br/>
    <div class="text-center">
        <button type="submit" class="btn btn-success">  Assign  </button>
        <button type="button"  class="btn btn-danger"> Close </button>
    </div>
</form>

select2 Структура импорта 

root\client\vendor\select2\select2-bootstrap.css
root\client\vendor\select2\select2.js
root\client\vendor\select2\style\select2.css

Ниже приведен снимок текущего выхода.

enter image description here

****************** Обновлено *******************

После этого console.log($('.roleSelect').get(0)); я получаю ниже в журнале консоли 

<select class="roleSelect form-control" multiple="multiple" required="">
    <option value="">Select Option</option>
    <option value="fov9sPjiXtbRdJccR">ADMIN</option>
    <option value="ga4p3FwQ76LH4Nq8y">MANAGER</option>
</select>

1 Ответ

0 голосов
/ 01 марта 2019

Я бы попробовал следующее: 

Template.ManageRoles.onRendered(function() {
    this.$(".roleSelect").select2({
    placeholder: 'Select Option'
  });
});

А затем в HTML оставьте первый параметр пустым: 

<option value=""></option>
...