Derek Henderson Derek Henderson - 1 year ago 101
jQuery Question

select2 allowClear not enabled when options set dynamically

When I create select2 dropdowns that are dynamically driven by the selection in another select2 dropdown, the

button for the updated dropdown becomes disabled.

It doesn't seem to matter if I build select2 on a
, destroy it, update the html, and rebuild it:

var enableSelect2 = function () {
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 =,
t = $(this);
type: 'post',
url: '/search/get' + (filterBy === 'panel_id' ? 'Isps' : 'Packages') + '/' + t.val(),
success: function (data) {
var toRebuild,
if (filterBy === 'panel_id') {
toRebuild = $('#isp_id, #package_id');
target = $('#isp_id');
} else {
toRebuild = $('#package_id');
target = $('#package_id');
toRebuild.each(function () {
if (filterBy === 'panel_id') {
$('#package_id').html($(document.createElement('option')).attr('value', 0).text('Select ISP first\u2026'));

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

Or if I use JSON with a hidden input:

$(function() {
var data = [

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

Any ideas why the clear button disappears?


Apologies that I did not clarify my html. In my code, every
has a
attribute. This is not in the fiddle I provided, as it was not originally my fiddle but borrowed from another SO question. I have now updated that fiddle with data-placeholder and it works:

Here is the twig code for my html which I did not previously include:

<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">
{% for panel in related.panel_id %}
<option value="{{ panel.value }}">{{ }}</option>
{% endfor %}
<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">
{% for isp in related.isp_id %}
<option value="{{ isp.value }}">{{ }}</option>
{% endfor %}
<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 value="0">Select ISP first&hellip;</option>

Answer Source

As stated in the doc, allowClear needs a placeholder and placeholder need a corresponding option value (which cannot be an empty string, but can be a single space).


This option only works when the placeholder is specified.



Note that because browsers assume the first option element is selected in non-multi-value select boxes an empty first option element must be provided () for the placeholder to work.

So your code should be something like this :

    allowClear: true,
    placeholder: "Select an attribute"
}).on('change', function() {
            allowClear: true,
            placeholder: "Select a value"