Javascript 选择带主干的2。木偶：预选值不隐藏

我正在尝试将Select2集成到木偶项目视图中

问题是：我想用已经选择的值初始化Select2，但所选元素在下拉列表中仍然可用。如果我清除该框，然后手动从下拉列表中重新选择项目，则这些项目将从下拉列表中正确删除

Javascript:

View.Profile = Marionette.ItemView.extend({
    template: profileTpl,
    onShow: function(){
      var $select = this.$("#categories"); // grabs the element for Select2
      $select.select2();                   // build the Select2 element
      $select.select2("val", ["american", "french", "italian"]); // select values
    }

HTML:

美国人
法语
意大利人
印度的

我可以在一个html示例页面上轻松实现这一点

使用木偶的onShow，“tag”元素会正确显示在Select2框中，但当我单击该框以选择不同的选项时，所有选项仍然可用

由于我在onShow事件中附加Select2元素的方式，我怀疑有一些事件未正确附加到Select2元素。

就是您的问题的工作示例

只需一个与代码相关的注释。访问视图元素时，最好使用

this.$el.find（'selector'）

引用，而不是通过jquery

$（'selector'）

查询它

---

你可以做得更短，比如

this.$（'selector'）

我想这与initSelection有关，但我不确定，因为它只是一个html页面，你能把一个JSFIDLE放在一起显示你遇到的问题吗？

<select id="categories" data-placeholder="Add a category..." multiple class="form-control" tabindex="8">
  <option></option>
  <option value="american">American</option>
  <option value="french">French</option>
  <option value="italian">Italian</option>
  <option value="indian">Indian</option>
</select>