web-dev-qa-db-ja.com

オプションが動的に設定された場合、select2 allowClearは有効になりません

別のselect2ドロップダウンの選択によって動的に駆動されるselect2ドロップダウンを作成すると、更新されたドロップダウンのallowClearボタンが無効になります。

selectでselect2を構築し、それを破棄し、htmlを更新し、再構築しても問題ありません。

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

または、非表示の入力でJSONを使用する場合：

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

クリアボタンが消える理由はありますか？

編集：

Htmlを明確にしなかったことをおologiesびします。私のコードでは、すべてのselectにはdata-placeholder属性。これはもともと私のフィドルではなく、別のSOの質問から借りたものです。現在、そのフィドルをdata-placeholderで更新しており、機能します。 http： //jsfiddle.net/eGXPe/119/ 。

これは、以前は含めなかったHTMLのtwigコードです。

<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

ドキュメントに記載 のように、allowClearにはplaceholderが必要で、placeholderには対応するoption値が必要です（空にはできません）文字列ですが、単一のスペースを使用できます）。

allowClear

このオプションは、プレースホルダーが指定されている場合にのみ機能します。

-

プレースホルダー

ブラウザーは、複数値以外の選択ボックスで最初のオプション要素が選択されていると想定しているため、プレースホルダーが機能するには空の最初のオプション要素を提供する必要があることに注意してください。

したがって、コードは次のようになります。

$('#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：allowClearオプションは、' + 'placeholderオプションと組み合わせて使用​​する必要があります。

3
Lundrim Rexhepi