Select2未加载到模板中。

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (103)

在标记问题重复之前,我想明确表示我已经尝试了所有可能的方法(例如此处),只需在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>
提问于
用户回答回答于

我会尝试以下方法:

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

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

<option value=""></option>

扫码关注云+社区

领取腾讯云代金券