在向Select2下拉菜单中的选项添加事件点击时遇到问题

Having trouble adding event clicks to options in Select2 dropdown

本文关键字:遇到 问题 事件 添加 下拉菜单 Select2 选项 在向      更新时间:2023-09-26

我有一个问题与Select2下拉菜单,这是阻止我从外部网站的链接添加到下拉菜单中的选项。

我一直在遵循几个指南,但是大多数都过时了,因为显然Select2的事件已经更新了。

我一直在尝试实现以下JS/JQ,但我不确定我是否把它放在正确的位置,或者即使它是正确的。

这样做的目的是在每个选项/元素的末尾添加链接按钮,将用户带到外部站点。我宁愿整个焦点/悬停区域是一个链接按钮,但似乎这是不可能的选择2?

function format(state) {
if (!state.id) return state.text; // optgroup
return state.text + " <i class='info'>link</i>";
}
var select2 = $("#select").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
}).data('select2');
select2.onSelect = (function(fn) {
return function(data, options) {
    var target;
    if (options != null) {
        target = $(options.target);
    }
    if (target && target.hasClass('info')) {
        alert('click!');
    } else {
        return fn.apply(this, arguments);
    }
}
})(select2.onSelect);

不幸的是,它要么无法工作,要么忽略所有其他脚本。

任何帮助都非常感谢!请记住,我对JS有点业余。

https://jsfiddle.net/dowenrockit/y3yoh1ao/

老实说,我不太确定你想要完成什么,你的想法太疯狂了。

这里有一个更新的,包括jQuery和Select2,以及一些你的css。我删除了大部分不需要的代码。以及你所有的javascript。

https://jsfiddle.net/y3yoh1ao/4/

还包括select元素的基本用法,它允许用户选择一个元素,并以编程方式对它做一些事情。

如果你想让用户在点击元素的时候进入一个网站,你所要做的就是将链接设置为选项的值,然后设置为window.location.href = value。将用户发送到该页。

交货。window.location.href = "http://google.com"

或者你可以解释选项的值,并从数组或其他东西中获取链接。

var myLinks["CA"] = "http://facebook.com" window.location.href = myLinks[value];

这样,就我理解你的问题,整个工作作为一个按钮。