带有模板和搜索的 Select2 依赖下拉列表答案

【问题标题】：Select2 dependent dropdown with templating and search带有模板和搜索的 Select2 依赖下拉列表
【发布时间】：2019-05-17 12:43:33
【问题描述】：

我有 2 个列表。当我在第一个中选择一个值时，它会更新第二个列表中的选项。只有第二个列表是 Select2。

我让它工作了，但 Select2 的搜索功能不起作用。

如果我检查 DOM，我注意到 Select2 生成的选项没有文本。是不是因为它搜索不出来？

这是我的 JS 代码：

$('.category').change(function(event) {
    var measure = $(this).parents('.row').find('.measure');

    // Modify placeholder when searching
    measure.prop('disabled', true).select2({placeholder: "Searching..."});

    // Remove existing options of the list (of a previous usage)
    measure.children('option').each(function(index, el) {
        if ($(el).val().length > 0)
            $(el).remove();
    });

    var DATA = 'tagcat=' + $(this).val();

    $.ajax({
        type    : "GET",
        url     : $('.custom-table-container').data('search-js'),
        data    : DATA,
        cache   : false,
        success : function(response) {
            var data = JSON.parse(response);

            // Update the measures list    
            measure.select2({
                allowClear       : true,
                data             : data.items,
                escapeMarkup     : function (markup) { return markup; },
                templateResult   : formatTag,
                templateSelection: formatTagSelect
            }).prop('disabled', false);
        }
    });
});

我能够通过手动添加列表中的 HTML 选项来进行搜索，但我丢失了结果模板...

代码：

$.ajax({
    // ...
    success : function(response) {
        var data = JSON.parse(response);

        data.items.forEach(function(tag) {
            // create the option and append to Select2
            var option = new Option(tag.name, tag.id, false, false);
            measure.append(option);
        });

        measure.select2({
            allowClear          : true,
            data                : data.items,
            escapeMarkup        : function (markup) { return markup; },
           templateResult       : formatTag,
           templateSelection    : formatTagSelect
        }).prop('disabled', false);
    }
});

我想如何将其编码为同时具有模板和搜索功能？

【问题讨论】：

标签： jquery ajax jquery-select2 dropdown jquery-select2-4

【解决方案1】：

抱歉，我刚刚发现我错了：我没有在我的模板结果函数中显示正确的数据。

因此，在一种情况下它之所以有效是因为特定数据不存在，而在另一种情况下，该数据存在并且它取代了我所做的特定模板……星期五下午处理它并不是很有效。 :D

所以正确的做法是在DOM中手动添加select的options，然后初始化Select2。

$.ajax({
    // ...
    success : function(response) {
        var data = JSON.parse(response);

        // create options in the DOM
        data.items.forEach(function(tag) {
            // create the option and append to Select2
            var option = new Option(tag.name, tag.id, false, false);
            measure.append(option);
        });

        // init Select2 with data
        measure.select2({
            theme               : "bootstrap4",
            placeholder         : "- Select a measure -",
            allowClear          : true,
            data                : data.items,
            escapeMarkup        : function (markup) { return markup; },
           templateResult       : formatTag,
           templateSelection    : formatTagSelect
        });
    }
});

【讨论】：