带有链接的 select2 标记中的单击事件

Posted 2023-05-07

【中文标题】带有链接的 select2 标记中的单击事件

【英文标题】：Click event in select2 tag with a link

【发布时间】：2014-02-16 10:25:43

【问题描述】：

我在标签模式下使用 select2。我的项目文本是一个链接，例如：

<a href='url'>tag1</a>.

select2 似乎吞下了标签上的点击事件（选择的选项），所以我无法导航到链接。

关于如何使链接起作用的任何想法？

【参考方案1】：

Select2 默认禁用点击事件，目前，您必须使用变通方法来获得所需的结果。这是我如何完成此操作的示例，感谢以下资源。如果您不使用 .data('select2') 的返回值重新实例化变量，这将不起作用

首先，为您的链接添加一个类：

<a href="#" class="detail-link">hello</a>

那你要监听Select2的onSelect事件

    var search = $("#searchBox");
    search.select2(
        placeholder: "Search...",
        allowClear: true,
        minimumInputLength: 3,
        maximumSelectionSize: 1,
        escapeMarkup: function(m)  return m; ,
        ajax:      blah blah blah       ,
        formatResult: window.App.formatFunction
    );


    search= search.data('select2');

    search.onSelect = (function(fn) 
        return function(data, options) 
            var target;

            if (options != null) 
                target = $(options.target);
            

            if (target && target.hasClass('detail-link')) 
                window.location = target.attr('href');
             else 
                return fn.apply(this, arguments);
            
        
    )(search.onSelect);

这个问题/答案/JFiddle 帮助了我，但重要的是要注意 .data('select2') 行

编辑：忘记资源 -- https://***.com/a/15637696

【讨论】：

我实际上指的是显示的选定标签（不在搜索结果下拉列表中）。但是上面的工作是通过使用 selectChoice 而不是 onSelect 来实现的。例如。 "search.selectChoice = (func..."

【参考方案2】：

我用select2-selecting event:

var $q = $('#select2input');
$q.select2(
    // your settings
);

$q.on('select2-selecting', function(e)
    window.location = e.choice.url;
);

我的 AJAX 负载如下所示：

    "items":[
        
            "id": "1",
            "text": "Foo",
            "url": "/foo"
        ,
        
            "id": "8",
            "text": "Bar",
            "url": "/bar"
        
    ]

【讨论】：

在版本 4+ 中，选择事件是 select2:selecting。来自this SO answer