web-dev-qa-db-fra.com

select2 allowClear n'est pas activé lorsque les options sont définies dynamiquement

Lorsque je crée des listes déroulantes select2 qui sont dynamiquement pilotées par la sélection dans une autre liste déroulante select2, le bouton allowClear pour la liste déroulante mise à jour est désactivé.

Cela ne semble pas avoir d'importance si je construis select2 sur un select, le détruis, mets à jour le html et le reconstruis:

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 une entrée caché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 d'effacement disparaît?

Modifier:

Toutes mes excuses pour ne pas avoir clarifié mon html. Dans mon code, chaque select a un data-placeholder attribut. Ce n'est pas dans le violon que j'ai fourni, car ce n'était pas à l'origine mon violon mais emprunté à une autre SO question. J'ai maintenant mis à jour ce violon avec data-placeholder et cela fonctionne: http://jsfiddle.net/eGXPe/119/ .

Voici le code twig pour mon code HTML que je n'avais pas inclus précédemment:

<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>
jqueryjquery-select2
28
Derek Henderson

Comme indiqué dans le document , allowClear a besoin d'un placeholder et placeholder a besoin d'une valeur correspondante de option (qui ne peut pas être vide) chaîne, mais peut être un seul espace).

allowClear

Cette option ne fonctionne que lorsque l'espace réservé est spécifié.

-

espace réservé

Notez que parce que les navigateurs supposent que le premier élément d'option est sélectionné dans des zones de sélection sans valeurs multiples, un premier élément d'option vide doit être fourni () pour que l'espace réservé fonctionne.

Votre code devrait donc ressembler à ceci:

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

79
Shikiryu

'Select2: L'option allowClear doit être utilisée en combinaison' + 'avec l'option placeholder.'

3
Lundrim Rexhepi