Select2未加载到模板中。 [流星+火焰]

Question

在标记问题重复之前，我想明确表示我已经尝试了所有可能的方法（例如here），只需在Meteor的简单页面上加载select2下拉列表。

下面是了解我的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

以下是当前输出的快照。

****************** 更新 *******************

在做这个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>

Answer 1

我会尝试以下方法：

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

然后在HTML中将第一个选项留空：

<option value=""></option>