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

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

'Select2: The allowClear option should be used in combination ' + 'with the placeholder option.'