select2 allowClear not enabled when options set dynamically
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).
allowClear
This option only works when the placeholder is specified.
--
placeholder
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 :
$('#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');
'Select2: The allowClear option should be used in combination ' + 'with the placeholder option.'