jquery - data - select2 allowClear no está habilitado cuando las opciones se configuran dinámicamente

select2 trigger change

Question

Cuando creo los menús desplegables select2 que son controlados dinámicamente por la selección en otro menú desplegable select2, el botón allowClear para el menú desplegable actualizado se deshabilita.

No parece importar si compilo select2 en un select , lo destruyo, actualizo el html y lo reconstruyo:

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

O si uso JSON con una entrada oculta:

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

¿Alguna idea de por qué el botón de borrar desaparece?

Editar:

Disculpas por no haber aclarado mi html. En mi código, cada select tiene un atributo de data-placeholder . Esto no está en el violín que proporcioné, ya que originalmente no era mi violín, sino que estaba tomado de otra pregunta de SO. Ahora he actualizado ese violín con el marcador de posición de datos y funciona: http://jsfiddle.net/eGXPe/119/ .

Aquí está el código de la rama de mi html que no incluí anteriormente:

<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

''Select2: la opción allowClear debe usarse en combinación'' + ''con la opción de placeholder .''

Answer 2

Como se indica en el documento , allowClear necesita un placeholder y un valor de option correspondiente (que no puede ser una cadena vacía, pero puede ser un solo espacio).

permitirClear

Esta opción solo funciona cuando se especifica el marcador de posición.

-

marcador de posición

Tenga en cuenta que debido a que los navegadores suponen que el primer elemento de opción está seleccionado en cuadros de selección sin valor múltiple, se debe proporcionar un primer elemento de opción vacío () para que el marcador de posición funcione.

Entonces tu código debería ser algo como esto:

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