Question

我正在使用https://github.com/pytesNET/tail.select插件来创建我的组合框/下拉菜单。一切正常，但是我想更改呈现的<li>标签的HTML（在下拉列表和标签列表中）。

您可以在此 JSFiddle 中看到正在使用的插件。

According to the documentation有一个名为cbLoopItem的回调，其中说：

您可以将自己的函数挂接到cbLoopItem选项以进行干预或接管每个选项的渲染过程。你自己函数接收4个参数：

item当前的item对象，应渲染该对象

optgroup当前的“组” /“父”元素

search搜索字符串（如果是搜索字符串），否则未定义

root根“下拉列表内部”对象。

您自己的函数应该返回Element对象，并将其添加到下拉列表，但您也可以返回null以跳过此单 option和false中断渲染过程。

请注意

如果您也不要操作cbLoopGroup，则必须返回<li>元素！

您不得添加全局数据键或数据组属性！

您不得添加点击事件处理程序！

所以看来我可以使用此回调来呈现我的<li>。当前，该插件创建以下HTML：

<li class="dropdown-option" data-key="1" data-group="Header one">Value 1</li>

我希望结果是这样的：

<li class="dropdown-option some-class-i-can-add" data-key="1" data-group="Header one">
    <i class="fab fa-amazon"></i> Value 1
</li>

我尝试没有成功：

tail.select('#my-select',
{
    // ...
    cbLoopItem: function(item, optgroup, search, root)
    {
        var x =  $('<li>Testing first without icon</li>');

        return x;
    }
});

但是它返回错误Uncaught TypeError: h.setAttribute is not a function。

Answer 1

已解决。

文档显示“您必须返回<li>元素（...）”，而我只返回纯字符串或jQuery对象。

要解决此问题，必须使用<li> JavaScript函数创建document.createElement。

tail.select('#my-select',
{
    cbLoopItem: function(item, optgroup, search, root)
    {
        var icon = '<i class="fab fa-amazon"></i>';
        var newItem = document.createElement('li');

        newItem.innerHTML = icon + item.value; // will create '<li><i class="fab fa-amazon"></i> Value 1</li>'

        return newItem;
    },
});

这仅适用于下拉列表中的项目。标签容器未收到<i/>图标，这意味着我需要使用回调cbComplete和事件change才能实现最终目标：无论是否在标签容器或下拉菜单中。

cbComplete是必需的，因为可能已经选择了一些选项（初始化插件时），我想立即显示图标。

cbComplete: function(item)
{
    var labels = $(item).find('.select-handle');

    // might be null (none selected)
    if (!labels)
        return;

    var icon = '<i class="fab fa-amazon"></i>';

    $.each(labels, function(i, label)
    {
        var key         = $(label).attr('data-key');
        var text        = $(label).text();
        var originalLi  = $(item).find('.dropdown-inner').find('[data-key="' + key + '"]'); // must always exists

        $(label).html(icon + text);
    });
}

每次在标签容器中选择一个选项时，都会触发change事件：

tail.select('#my-select',
{
    //
}).on('change', function(item, state)
{
    // No need to do anything
    if (state == 'unselect')
        return;

    var labels = $(this.container).find('.select-handle');
    var dropdown = $(this.dropdown);

    // might be null (none selected)
    if (!labels)
        return;

    var icon = '<i class="fab fa-amazon"></i>';

    $.each(labels, function(i, label)
    {
        var key         = $(label).attr('data-key');
        var text        = $(label).text();
        var originalLi  = $(dropdown).find('.dropdown-inner').find('[data-key="' + key + '"]'); // must always exists

        $(label).html(icon + text);
    });
));

我想要一个图标，但是您可以使用图像或其他任何东西。

您可以在此 JSFiddle 中看到最终结果。

Tail.Select插件呈现li标签

1 个答案: