javascript - Select2 with Backbone.Marionette: Pre-selected values not hidden -

javascript - Select2 with Backbone.Marionette: Pre-selected values not hidden -

i trying integrate select2 within marionette itemview.

the problem: want initialize select2 already-selected values, selected elements still available in dropdown. if clear box manually reselect items dropdown, items removed dropdown.

javascript:

view.profile = marionette.itemview.extend({ template: profiletpl, onshow: function(){ var $select = this.$("#categories"); // grabs element select2 $select.select2(); // build select2 element $select.select2("val", ["american", "french", "italian"]); // select values }

html:

<select id="categories" data-placeholder="add 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>

i can on single html illustration page no trouble.

using marionette's onshow, "tag" elements correctly displayed in select2 box, when click box select different options, options still available.

i suspect there event not attached select2 element because of way i'm attaching select2 element in onshow event.

here working illustration of issue.

just 1 note related code. it's practice, when accessing element of view, utilize this.$el.find('selector') reference instead of querying via jquery $('selector').

you can shorter this.$('selector').

javascript marionette jquery-select2 backbone-views backbone-events