Select2 Multi-Select Strange Overlay

Question

ページが最初に読み込まれると、プレースホルダが表示されず、プレースホルダをオーバーレイしている右下隅に、奇妙な円があります（Select2の検索機能に関係すると思います）。

オプションを選択2ドロップダウンから選択されるそして、オプションが現れたが、全体の面積が起因し、その円のオーバーレイに押し下げられます。

私は選択をクリアする場合は、プレースホルダが現れますが、円はまだそこにあります。

私のアプリケーションは

は、ここで私は（私はminimumResultsForSearchオプションでプレイしましたが、運がなかった）私の.jsファイルで使用しているコードであるバックボーンとマリオネットを使用しています。ここで

this.$el.find("#categorySelect").select2({ 
    multiple: true, 
    allowClear: true, 
    minimumResultsForSearch: -1, 
    placeholder: "Categories" 
}) 

スクリプトの私の.tplファイルに私が使用しているコード

<select id="categorySelect" name="Categories" multiple="multiple" class="form-control" style="width: 100%;"> 
    <% for(category in categories){ %> 
     <option value="<%=categories[category].title%>" 
     <% if (categories[category].active == true) { %> 
      selected 
     <%}%> 
     > 
     <%=categories[category].title%></option> 
    <% }; %> 
</select> 

Answer 1

ご注文が間違っていると、あなたがそれを使用する前にjQueryをロードする必要があります。

また、まだ存在しない、つまり実際にビューをレンダリングする前に、select2を初期化しようとしています。

そして

this.$el.html(_.extend(this.template(modelJSON))); なぜあなたはHTML文字列を拡張しようとするような任意の意味をなさない代があるのですか？

または

$(function(select2) { 
    App.start(select2); 
}); 

jQueryのreadyイベントハンドラの最初の引数としてselect2を渡して何？

あなたが書いているコードを理解してください、なぜあなたはそれを書いているのですか？

このような問題をすべて修正すると、http://jsfiddle.net/az5dksyz/2/のようになります。

idをテンプレート文字列に使用しないでください。複数回レンダリングしたり、インラインスタイルルールを使用したりすることはできません。