javascript – Select2 4.0点击项目不会触发select2:选择
作者:互联网
我正在使用select2 4.0,当我从json文件加载数据时,没有任何创建的元素触发select2:select事件.我认为它与事件委托有关,但网站上的例子看起来很好.
在过去的一个小时里,我一直在忽视这一点,我只是不明白我错过了什么.
现在我用它来选择一个项目,但这显然不起作用:
$("body").on("click", "#select2-select-results .person-entry", function()
{
var $this = $(this);
var name = $this.data('name');
select2.find('option').val(name).text(name);
});
绑定$(…).on(‘select2:select’);从不开火,但是$(…).on(‘select2:open);确实.所以我不确定发生了什么.
然而,我注意到的是,在加载数据时,没有<选项>标签已创建.
这是我处理这件事的整个JavaScript:
(function($)
{
"use strict";
var term = null;
var select2 = $("#select");
select2.select2({
allowClear: true,
ajax: {
url: "js/data.json",
dataType: "json",
delay: 250,
data: function(params)
{
// Save the terms for filtering
term = params.term;
return params;
},
processResults: function(data)
{
var people = [];
for(var i = 0; i < data.people.length; i++)
{
var person = data.people[i];
var filter = term || '';
if (person.name.toLowerCase().indexOf(filter.toLowerCase()) !== -1) {
people.push(person);
}
}
return {
results: people
};
}
},
templateResult: function(person)
{
if (person.loading) {
return person.text;
}
var personDetails = '<div class="person-information">' +
'<span class="person-name">' + person.name + '</span>' +
'<span class="person-address">' + person.address + '</span>' +
'</div>';
return '<div class="person-entry" data-name="' + person.name + '"><img src="' + person.image + '" />' + personDetails + '</div>';
},
templateSelection: function(person)
{
return person.name;
},
escapeMarkup: function(markup)
{
return markup
}
});
$("body").on("click", "#select2-select-results .person-entry", function()
{
var $this = $(this);
var name = $this.data('name');
select2.find('option').val(name).text(name);
});
})(jQuery);
谁能告诉我这里我做错了什么?我只是不明白.
解决方法:
听起来您没有在数据对象上设置id字段.如果没有此字段,则Select2无法知道如何设置< select>的值到,所以它不允许它被选中.
此外,搜索和(默认情况下)在结果列表中显示数据时需要文本字段.
标签:jquery,javascript,jquery-select2-4 来源: https://codeday.me/bug/20190714/1459049.html