select2 allowClearは、オプションが動的に設定されている場合に有効にされません。

Question

別のselect2ドロップダウンの選択によって動的に駆動されるselect2ドロップダウンを作成すると、更新されたドロップダウンのallowClearボタンが無効になります。

私がselectにSELECT2を構築する場合、重要ではそれを破壊する、HTMLを更新し、それを再構築していないよう：

var enableSelect2 = function() { 
     $(this).select2({ 
      width: '200px', 
      allowClear: true, 
      minimumResultsForSearch: 7, 
      formatResult: function (result, container, query, escapeMarkup) { 
       var markup = []; 
       markMatchedSelect2Text(result.text, query.term, markup, escapeMarkup); 
       return markup.join(''); 
      } 
     }); 
    }, 
    populateDropdown = function() { 
     var filterBy = this.id, 
      t = $(this); 
     $.ajax({ 
      type: 'post', 
      url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(), 
      success: function (data) { 
       var toRebuild, 
        target; 
       if (filterBy === 'panel_id') { 
        toRebuild = $('#isp_id, #package_id'); 
        target = $('#isp_id'); 
       } else { 
        toRebuild = $('#package_id'); 
        target = $('#package_id'); 
       } 
       toRebuild.each(function() { 
        $(this).select2('destroy'); 
       }); 
       target.html(data); 
       if (filterBy === 'panel_id') { 
        $('#package_id').html($(document.createElement('option')).attr('value', 0).text('Select ISP first\u2026')); 
       } 
       toRebuild.each(enableSelect2); 
      } 
     }); 
    }; 

$('body').on('change', '#searchForm #isp_id, #searchForm #panel_id', populateDropdown); 

または私は隠された入力とJSONを使用する場合：

$(function() { 
    var data = [ 
     [{id:0,text:'black'},{id:1,text:'blue'}], 
     [{id:0,text:'9'},{id:1,text:'10'}] 
    ]; 

    $('#attribute').select2({allowClear: true}).on('change', function() { 
     $('#value').removeClass('select2-offscreen').select2({data:data[$(this).val()],allowClear: true}); 
    }).trigger('change'); 
}); 

http://jsfiddle.net/eGXPe/116/

クリアボタンが消えた理由を任意のアイデア？

編集：私は私のhtmlを明確にしませんでした

謝罪。私のコードでは、すべてselectにはdata-placeholder属性があります。これは私が提供したフィドルではなく、もともと私のフィドルではありませんでしたが、別のSOの質問から借りたものです。私はデータのプレースホルダでそのフィドルを更新しました。それは動作します：http://jsfiddle.net/eGXPe/119/。 placeholderとplaceholder空の文字列にできない（対応option値を必要とすることができますが、を必要とするallowClearstated in the docとして

<li> 
    <label for="edit[panel_id]" class="hidden">Edit Panel ID?</label> 
    <input type="checkbox" id="edit[panel_id]" name="edit[panel_id]" /> 
    <label for="panel_id">Panel:</label> 
    <select id="panel_id" name="panel_id" data-placeholder="Select a panel"> 
     <option></option> 
     {% for panel in related.panel_id %} 
      <option value="{{ panel.value }}">{{ panel.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[isp_id]" class="hidden">Edit ISP ID?</label> 
    <input type="checkbox" id="edit[isp_id]" name="edit[isp_id]" /> 
    <label for="isp_id">ISP:</label> 
    <select id="isp_id" name="isp_id" data-placeholder="Select an ISP"> 
     <option></option> 
     {% for isp in related.isp_id %} 
      <option value="{{ isp.value }}">{{ isp.name }}</option> 
     {% endfor %} 
    </select> 
</li> 
<li> 
    <label for="edit[package_id]" class="hidden">Edit Package ID?</label> 
    <input type="checkbox" id="edit[package_id]" name="edit[package_id]" /> 
    <label for="package_id">Package:</label> 
    <select id="package_id" name="package_id" data-placeholder="Select a package"> 
     <option></option> 
     <option value="0">Select ISP first&hellip;</option> 
    </select> 
</li> 

Answer 1

を、：ここ

は、私が以前に含まれていませんでした私のhtmlのための小枝コードです単一のスペースでなければならない）。

allowClear

プレースホルダが指定されている場合、このオプションはのみ動作します。

- ブラウザが最初のオプション要素を想定しているため、空の最初のオプションの要素がなければならない非多値選択ボックスで が選択されていること

プレースホルダは

注 提供（）プレースホルダが動作するようにします。

だからあなたのコードは次のようなものでなければなりません：

$('#attribute').select2({ 
    allowClear: true, 
    placeholder: "Select an attribute" 
}).on('change', function() { 
    $('#value') 
     .removeClass('select2-offscreen') 
     .select2({ 
      data:data[$(this).val()], 
      allowClear: true, 
      placeholder: "Select a value" 
     }); 
}).trigger('change'); 

http://jsfiddle.net/eGXPe/118/

Answer 2

'Selectセレクト：allowClearオプションを組み合わせて使用​​する必要があります' 'placeholderオプションで' +