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

使用链接在select2标记中单击事件

2 个答案: