我正在寻找一种方法将click-event附加到select2-result-item。 我已经完成并通过
格式化结果和选择function format(state) {
if (!state.id) return state.text; // optgroup
return state.text + " <i class='info'>link</i>";
}
添加“信息” - 图标 我现在正试图将一个简单的click事件附加到.info-element但是无法使其工作：
$('.info').on('click', function(event){
event.preventDefault();
alert("CLICK");
$('#log').text( "clicked" );
});
有任何帮助吗？ 有类似问题的人吗？ 这有可能吗？
准备了一个jsFiddle答案 0 :(得分：34)
由于Select2 lib会阻止弹出窗口列表中的任何点击事件，因此您无法直接将事件绑定到.info。但您可以重新定义onSelect方法，并在那里放置您想要的任何代码。
参见示例：http://jsfiddle.net/f8q2by55/
多项选择的更新：http://jsfiddle.net/6jaodjzq/
答案 1 :(得分：9)
这在概念上类似于netme，但是select2事件是错误的（可能是版本差异），你需要使用stopPropagation来阻止项目被选中：
$('#mySelect2').on('select2-open', function() {
$('.select2-results .info').on('mouseup', function(e) {
e.stopPropagation();
console.log('clicked');
});
});
如果与x-editable一起使用。这样做是当x-editable进入编辑模式（显示事件）时，就是当select2存在并且你可以连接到它的open函数时。
$('#myXEditable').on('shown', function () {
$(this).data('editable').input.$input.on('select2-open', function() {
$('.select2-results .info').on('mouseup', function(e) {
e.stopPropagation();
console.log('clicked');
});
});
});
答案 2 :(得分：7)
对于4.0.0之前的Select2版本（3.5.x及以下版本），您应该参考this answer about binding to onSelect。
在较新版本的Select2中，事件不再在结果中被杀死，因此您可以像往常一样绑定到mouseup / mousedown事件。您应该避免绑定到click事件，因为默认浏览器不会触发它。
$(".select2").select2({
templateResult: function (data) {
if (data.id == null) {
return data.text;
}
var $option = $("<spam></span>");
var $preview = $("<a target='_blank'> (preview)</a>");
$preview.prop("href", data.id);
$preview.on('mouseup', function (evt) {
// Select2 will remove the dropdown on `mouseup`, which will prevent any `click` events from being triggered
// So we need to block the propagation of the `mouseup` event
evt.stopPropagation();
});
$preview.on('click', function (evt) {
console.log('the link was clicked');
});
$option.text(data.text);
$option.append($preview);
return $option;
}
});<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.js"></script>
<select class="select2" style="width: 200px;">
<option value="https://google.com">Google</option>
<option value="https://mail.google.com">GMail</option>
</select>
在此示例中，我们停止传播mouseup事件，以便浏览器触发click事件。如果您不使用实际链接，而只需要捕获click事件，则应该只关注mouseup事件。
答案 3 :(得分：4)
以上所有答案都不适用于select2 4.0.0，所以这就是我最终做的事情：
$(document).on('mouseup', '.select2-container--open .select2-results__option', function (e) {
// Act on the element
}
具体来说，我只想对之前选择的项目采取行动：
$(document).on('mouseup', '.select2-container--open .select2-results__option[aria-selected=true]', function (e) {
// Do something on the previously-selected item
}
答案 4 :(得分：2)
只需添加'open'监听器并为''标签设置另一个'mouseup'监听器：
$("#select").on('open', function() {
$('.select2-results i').on('mouseup', function() {
alert('aaa');
});
});
以下是我的解决方案的链接：http://jsfiddle.net/EW8t7/
答案 5 :(得分：2)
根据文档更简单的方法。
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
很惊讶没有看到任何答案。
答案 6 :(得分：2)
使用默认的select2select事件触发器，而不使用其他jquery事件
$('#mySelect2').on('select2:select', function (e) {
var data = e.params.data;
console.log(data);
});
有关更多详细信息，请参见下面的链接 https://select2.org/programmatic-control/events
答案 7 :(得分：1)
我认为Select2对mouseup事件的处理会阻止.info元素获得点击事件。让.info元素捕获mouseup事件并阻止它传播似乎可以解决这个问题。
function format(state, container) {
if (!state.id) return state.text; // optgroup
container.append(state.text);
$('<i class="info">link</i>')
.appendTo(container)
.mouseup(function(e) {
e.stopPropagation();
})
.click(function(e) {
e.preventDefault();
alert('CLICK');
});
}
这也可以用来支持所选项目中的链接，但是需要捕获的是mousedown事件。
答案 8 :(得分：0)
我已经改变了一些事情+将要收听的事件。它现在是一个mousedown ......
function format(state) {
if (!state.id) return state.text; // optgroup
return state.text + " <a class='info'>link</a>";
}
$("select").select2({
formatResult: format,
formatSelection: format,
escapeMarkup: function(m) { return m; }
}).on('select2-open',function(){
console.log($('.info'))
$('.info').on('mousedown', function(event){
console.log("click")
$('#log').text( "clicked" );
event.preventDefault();
});
});<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.js"></script>
<select>
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
<div id="log"></div>
答案 9 :(得分：0)
您需要从.select2-results__options元素取消绑定mouseup事件。我在我的templateResult函数中执行它：
function templateResult(location) {
var $location = $([html with links]);
$('.select2-results__options').unbind('mouseup');
return $location;
}
如果您想保持select2的选择选项和关闭下拉列表的默认行为，您需要手动触发这些事件：
$('.select2-results__options').unbind('mouseup');
$('a', $location).on('click', function (e) {
$('#locations_dropdown').select2('val', location.id);
$('#locations_dropdown').select2('close');
});
return $location;
答案 10 :(得分：0)
在select2 v4.0.3中遇到了这个问题，最终使用了'select2：selecting'事件。本质上，这就是我的操作方式：
var $select2 = $savedReportsList.select2({ [stuff] });
$select2.on('select2:selecting', function(e) {
var args = e.params.args;
if ($(args.originalEvent.target).hasClass('[something]')) {
if (confirm('Are you sure?')) {
window.location = '[somewhere]' + '/' + args.data.id;
}
return false; // stops propogation (so select2:select never fires)
});
});
答案 11 :(得分：0)
像这样的简单onchange事件也将有助于解决问题
<select id="GetClientAccounts" class="default-select2 form-control col-md-4" onchange="GetClientAccounts();">
<option disabled selected value="-1">Select a customer from here</option>
@{
if (ViewBag.customers != null)
{
foreach (CustomerTBL customer in ((List<CustomerTBL>)ViewBag.customers).OrderBy(c => c.cusCustomerName))
{
<option value="@customer.cusCustomerID">@customer.cusCustomerName</option>
}
}
}
</select>