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

Question

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

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

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

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

Answer 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://stackoverflow.com/a/15637696

Answer 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"
        }
    ]
}