动态添加选项到 select2

Posted 2023-05-07

【中文标题】动态添加选项到 select2

【英文标题】：Add option to select2 dynamically

【发布时间】：2018-06-12 21:43:59

【问题描述】：

我已阅读所有可能的参考资料，了解如何将选项动态添加到 select2，但没有一个有效。我猜那些已经被复制了。

这种情况是我想要当用户在组合的搜索框中输入时，我在服务器中搜索我的列表并在列表中显示匹配的列表。

    <select class="js-data-example-ajax" id="mySelect2">
    </select>
    <script>
        $(document).ready(function() 
            $('.js-data-example-ajax').select2(
                language: "fa",
                dir: "rtl",
                ajax: 
                    url: 'search_employees',
                    processResults: function (data) 
                        for (i = 0; i < data.items.length; i++)
                            var newOption = new Option(data.items[i].name, data.items[i].id, false, false);
                            $('#mySelect2').append(newOption).trigger('change');
                        
                    ,
                    data: function (params) 
                        var query = 
                            search: params.term,
                            type: 'public'
                        ;
                        // Query parameters will be ?search=[term]&type=public
                        return query;
                    
                
            );
        );
    </script>

我确信“search_employees”的回复是这样的：

"items": ["id": 8, "name": "Hamed"]

和 'data.items[i].name' 和 'data.items[i].id' 是正确的。

我在检查中检查了代码，该代码有一些 option> 标签，我的意思是这是有效的，并将 Hamed 添加为 option此 select> 中的 > 标记，但它们根本不显示。

我有什么遗漏吗？

tnx

【问题讨论】：

$('#mySelect2') 和 $('.js-data-example-ajax') 看起来不同

【参考方案1】：

为什么不在processResults 处理程序中简单地进行以下转换？

 processResults: function (data) 
    if (data.items && data.items.length==0) 
        $('.js-data-example-ajax').val(null).trigger('change');
    
    return 
        results: $.map(data.items, function(obj) 
          return  id: obj.id, text: obj.name ;
    )
 ;

这是一个有效的小提琴：http://jsfiddle.net/beaver71/htqyybmc/

P.S.：在 jsfiddle 中，ajax 请求是模拟的，所以查询没有应用，结果也没有过滤

【讨论】：

但是有一个问题，如果搜索返回null，列表不会省略form中前面的项目或者说什么也没找到

您可以在 processResults 中添加所有逻辑，例如检查是否有零项与查询匹配，您可以重置 select 的当前值。我已经更新了我的小提琴