将属性添加到 select2 中的选定列表项

Posted 2023-05-07

【中文标题】将属性添加到 select2 中的选定列表项

【英文标题】：Add attributes to the selected list items in select2

【发布时间】：2017-08-25 06:41:14

【问题描述】：

Here 是一个工作中的 jsfiddle。我希望将属性（特别是 id）添加到创建的 <li> 元素中。我的用例与小提琴略有不同，而不是使用数组，我从 ajax 获取数据。此外，如果数据库中不存在相同的标签，我想让我的用户灵活地创建新标签。保存具有 id 的新创建的项目列表比简单的类要好得多。我可以修改创建的<li> 元素的属性吗？

我的实际代码是这样的：

$(".js-data-example-ajax").select2(
        ajax : 
            url : "/content/search_skills",
            dataType : 'json',
            delay : 250,
            data : function(params) 
                return 
                    q : params.term, // search term
                    page : params.page
                ;
            ,
            processResults : function(data, params) 
                params.page = params.page || 1;

                return 
                    results : data.items,
                    pagination : 
                        more : (params.page * 5) < data.total_count
                    
                ;
            ,
            cache : true
        ,
        escapeMarkup : function(markup) 
            return markup;
        , // let our custom formatter work
        minimumInputLength : 1,
        templateResult : formatRepo,
        templateSelection : formatRepoSelection,
        tags : true,
        createTag : function (params) 
            return 
                id: params.term,
                text: params.term,
                newOption: true
              
            ,
    );
    function formatRepo(repo) 
        if (repo.loading)
            return repo.text;

        var markup = '<ul class="list-group clear-list m-t">' + '<li class="list-group-item fist-item"><span class="pull-right">' + repo.id + '</span> <span class="label label-success">' + repo.count + '</span> ' + repo.text + '</li>';

        return markup;
    

     function formatRepoSelection (repo) 
         var markup = repo.text;
         return markup;
          

而我的jsp（html）是：

<select class="js-data-example-ajax" style="width: 100%" multiple="multiple">
    //Iterating through database query result to pre-load option items
    <option value="<%=skill_objective.get("id")%>" selected="selected"><%=skill_objective.get("id")%> <%=skill_objective.get("name") %></option>
</select>

【问题讨论】：

如果您投反对票，请发表评论，以便我改进问题。谢谢！

【参考方案1】：

Here 是一个可行的解决方案：

$(".js-data-example-ajax").select2('data') 将为我提供所有选定对象的哈希值。