select2 allowClear pas activé lorsque les options de définir dynamiquement

Quand je créer select2 des listes déroulantes qui sont dynamiquement entraînée par la sélection dans un autre select2 liste déroulante, les allowClear bouton pour la mise à jour de liste déroulante devient invalide.

Il ne semble pas à la matière si je construis select2 sur un select, détruire, mettre à jour le code html, et de le reconstruire:

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);

Ou si j'utilise JSON avec un caché entrée:

$(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/

Des idées pourquoi le bouton effacer disparaît?

Edit:

Excuses que je n'ai pas préciser ma html. Dans mon code, chaque select a un data-placeholder attribut. Ce n'est pas dans le violon, j'ai fourni, comme il n'était pas à l'origine de mon violon, mais emprunté à un autre DONC, la question. J'ai maintenant mis à jour que de jouer avec des données à espace réservé, et ça fonctionne: http://jsfiddle.net/eGXPe/119/.

Ici est le rameau code de mon html, je n'ai pas auparavant comprennent:

<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>