select2 如何自定义提示信息-布布扣-bubuko.com
标签：color dom layui href 默认事件 替换 each ase options
最近项目中使用到了select2来美化和丰富下拉框的功能，这款插件功能丰富，使用简单，可以对已经生成的select标签进行改造，也可以对json数据直接生成下拉列表，包括一些检索功能，异步加载功能等，能够很大程度的满足视觉和交互的要求。是开发过程中不可多得的一款利器。
官方文档是英文文档且是以问答形式展示他的可配置项的，可能作者会觉得这样做比较有趣，但是对于渣渣英语的我来说，肯定是一种煎熬， 现在和大家分享一下在开发过程中的一些问题：
一、使用篇
1.根据官方文档的提示配置了placeholder却不起作用；
1.1 你需要在select标签中放置一个空的option标签，用来做placeholder文字的存储容器；
1.2 你要在select标签上添加一个属性“data-placeholder=‘ 你要提示的placeholder ‘”
1.3 最后才是在select2 的配置项中加入配置项"placeholder: ‘请选择‘,"
而文档中却没有提到这些东西，小小的一个功能藏这么多猫腻，真是心塞；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/select2/dist/css/select2.css">
</head>
<body>
<select data-tags="true" data-placeholder="请选择" >
<option></option>
<option value="1">1111</option>
<option value="2">2222</option>
<option value="3">3333</option>
<option value="4">4444</option>
</select>
</body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/select2/dist/js/select2.min.js"></script>
<script>
$("select").select2({
placeholder: "请选择",
allowClear: 0,
minimumResultsForSearch: Infinity,
width:200
});
</script>
</html>
2. 取消下拉框的检索功能；
配置项为 { minimumResultsForSearch: Infinity, }
二、改造篇
一.下拉框选择过程中弹框确认
该类事件可以理解为在select2对象在操作的各个阶段的钩子函数，当然官方为我们配置相应的接口，允许我们在打开，关闭，选前，选中，选后等时间阶段来处理我们配置的回调函数；
这类事件（点击查看）可以通过在on绑定在select2实例上，一般性的功能可以在回调函数中处理；
$("select").select2({
placeholder: ‘请选择‘
}).on("select2:selecting",function(e){
alert(" 我选中了 ")
});
现在有一个棘手的问题，我需要在选中的一瞬间进行弹框提示，然后不允许select2的其他事件继续向执行，然后经过弹框确认后再继续向下执行，此时弹框不能做出任何改变；
首先在点击模态框的过程中，不能让select下拉框关闭：
我们需要进行2步骤操作：
1.1 在弹框出来后，除了点击“确认”和“取消”按钮，点击其他地方不能关闭下拉框；
select2会在其构造函数BaseSelection的原型上定义关闭方法，关闭方法中使用自定义的事件关联到对应id的盒子上，我们可以在这个方法中来阻断关闭操作；
BaseSelection.prototype._attachCloseHandler = function (container) {
var self = this;
$(document.body).on(‘mousedown.select2.‘ + container.id, function (e) {
var $target = $(e.target);
var $select = $target.closest(‘.select2‘);
var $all = $(‘.select2.select2-container--open‘);
$all.each(function () {
var $this = $(this);
if (this == $select[0]) {
return;
}
var $element = $this.data(‘element‘);
//在模态框存在的条件下，禁止使用select2的关闭功能（这里可以根据你使用的类来灵活操作）
var mask = $(".layui-layer-shade");
if(mask.length == 0){
$element.select2(‘close‘);
}
});
});
};
1.2 在选择select2框下的内容时，不能立即执行回调函数，回调函数必须放在“确认”按钮点击后处理；
通常在最初程序设计的时候，正确的做法应该是把后续函数设计在layer的确认回调函数中，我本来不打算使用select2插件，但是产品的世界你懂得，变化是随时随地发生的。
最初的函数是通过监控select标签的change状态来链式触发的，这一点很重要，如果想把目标回调函数放到select2的钩子函数中，会直接执行，不符合我们弹框进行确认取消的目的；
如何实现本地的这种异步操作？其实我们需要使用一个中间函数，让这个函数去触发select标签的change事件。
var selectWebNamer = $(".selectWebName").select2({
myMsg:‘无可配置网站‘, //此处不是select的配置项后面解说
placeholder: ‘请选择‘
}).on("select2:selecting",function(e){
if(data.siteList.length==0){
return false;
}
if(!that.status.canChange){
that._confirmChange(e, that._queryParam,this);
}
});
第一件事情：阻止默认事件 event.preventDefault(); 我们的异步函数我们自己来控制，select2取消你自作主张的行为；
此时绑定在select2:selecting 事件上的函数会去调起弹框窗口；
that._queryParam 是中间函数，这个函数会在确认按钮后执行；下一步会触发真正的select标签change事件；
而event事件是select2包装后的事件，这个包装好的事件可以让我们跟踪到真正需要点击的select 标签；所以在 that._queryParam 中需要带入这个event对象；
在确认或取消点击的一瞬间select2的下拉框要关闭，所以此时通过指正传入这个select2对象也是有必要的；
_confirmChange:function(event,callback,$this){
var that = this;
event.preventDefault();
$(".layui-layer-shade").remove();
layer.closeAll();
layer.open({
type: 1,
title: ‘返回‘,
area: [‘500px‘, ‘270px‘],
btn: [ ‘确认‘,‘取消‘],
closeBtn: 2,
content: $(‘#changeMsg‘),
btn1: function (index) {
layer.closeAll();
if(callback){
callback(event);
$($this).select2(‘close‘);
that.status.canChange = true;
}
},
btn2: function (index) {
layer.close(index);
$($this).select2(‘close‘);
}
});
//}
},
event对象中包含了我们现在操作的dom对象，和当前选中的option上的值;
jquery 如何选中 select中某个option?，用的不多，可能大家都忘记了吧。
此时，我们的change事件被触发了，就和我们手动点击了option 一样，后续的代码可以顺利执行了。
_queryParam:function(event){
if(!event){
return false;
}
var target = event.currentTarget;
var name = event.params.args.data.text;
$(target).val(name).trigger("change");
},
二、如何修改select2的提示信息
采用select2实例化后如果后台没有给我们返回数据的话，select2会友好的在下拉框处提示“No Result Is Fonud”（貌似是这样）
然后，可爱的交互妹妹说，不行，我不要看英文，我不认识。。。。。 好吧，你赢。
检查了一下，好像没有这个提示信息配置api，于是我就邪恶的找到引入文件中的select2.min.js ctrl+R(“No Result Is Fonud” --------" 别瞎拉了，后台没返回")
ok 懒得改，就这样。
过了一会儿交互妹妹不干了，怎么都是“别瞎拉了，后台没返回”，我要的是“呵呵，我不想给你返回 ”，“ 返回过程中被恐龙吃掉了 ”，“你太丑了，不给你看”。。。。。。。
好吧好吧，我给你配置成你想说啥说啥还不行吗。
看了一下文档，作者一看就是高手提供了10来种语言的提示信息，原来人家本来就有中文版的“别瞎拉了，你后台没返回”，还有英文版的“don`t blind pull la , then didn‘t give us ”,还有日文版的“ 雅蠛蝶雅蠛蝶” ，可恨的是zh-CH.js和zh-TW.js 是分别简体和繁体的，丫的，搞事情。
如果没有要求提示不一样的内容，直接在配置项中设置language就可以使用对应的语言；
如果想要提示不应的内容，需要手动改造一下，让它去替换。
我们找到与结果相关的Result模块，并找到其原型上的append方法；
我们在option上使用的字段是myMsg ,来配置本下拉框的无内容提示，
原来的提示条件最好给他保留 如果我没有配置myMsg字段那你就按照你原来的处理，如果我有配置myMsg字段，你就要按照我的来。
if( data.results == null || data.results.length === 0)&& !myMsg) { 你原来怎么处理就怎么处理 }
else if((data.results == null || data.results.length === 0)&& !!myMsg){ 在result:message 时间的参数中加入我们的信息 }
Results.prototype.append = function (data) {
this.hideLoading();
var myMsg = this.options.options.myMsg; //获取提示文字
var $options = [];
if ((data.results == null || data.results.length === 0)&& !myMsg) { //按你的来
if (this.$results.children().length === 0) {
this.trigger(‘results:message‘, {
message: ‘noResults‘
});
}
return;
}else if((data.results == null || data.results.length === 0)&& !!myMsg){ //按我的来
if (this.$results.children().length === 0) {
this.trigger(‘results:message‘, {
message: ‘noResults‘,
myMessage:myMsg
});
}
return;
}
data.results = this.sort(data.results);
for (var d = 0; d < data.results.length; d++) {
var item = data.results[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
然后顺藤摸瓜，从results:message事件上摸到展示displayMessage方法上，然后我们判断一下 “myMessage” 带过来了没有，如果带过来了，那就用我们的提示
Results.prototype.displayMessage = function (params) {
var escapeMarkup = this.options.get(‘escapeMarkup‘);
this.clear();
this.hideLoading();
var $message = $(
‘<li role="treeitem" aria-live="assertive"‘ +
‘ class="select2-results__option"></li>‘
);
var message = this.options.get(‘translations‘).get(params.message);
$message.append(
escapeMarkup(
params.myMessage? params.myMessage:message(params.args) //决定用我们的提示还是它自己的提示。
)
);
$message[0].className += ‘ select2-results__message‘;
this.$results.append($message);
};
ok 至此，交互妹子的需求都实现了，select2的本次改造也结束了。
标签：color dom layui href 默认事件 替换 each ase options
原文：http://www.cnblogs.com/wuhaozhou/p/7449661.html
var selectWebNamer = $(".selectWebName").select2({
myMsg:‘无可配置网站‘, //此处不是select的配置项后面解说
placeholder: ‘请选择‘
}).on("select2:selecting",function(e){
if(data.siteList.length==0){
return false;
}
if(!that.status.canChange){
that._confirmChange(e, that._queryParam,this);
}
});
Results.prototype.append = function (data) {
this.hideLoading();
var myMsg = this.options.options.myMsg; //获取提示文字
var $options = [];
if ((data.results == null || data.results.length === 0)&& !myMsg) { //按你的来
if (this.$results.children().length === 0) {
this.trigger(‘results:message‘, {
message: ‘noResults‘
});
}
return;
}else if((data.results == null || data.results.length === 0)&& !!myMsg){ //按我的来
if (this.$results.children().length === 0) {
this.trigger(‘results:message‘, {
message: ‘noResults‘,
myMessage:myMsg
});
}
return;
}
data.results = this.sort(data.results);
for (var d = 0; d < data.results.length; d++) {
var item = data.results[d];
var $option = this.option(item);
$options.push($option);
}
this.$results.append($options);
};
然后顺藤摸瓜，从results:message事件上摸到展示displayMessage方法上，然后我们判断一下 “myMessage” 带过来了没有，如果带过来了，那就用我们的提示
Results.prototype.displayMessage = function (params) {
var escapeMarkup = this.options.get(‘escapeMarkup‘);
this.clear();
this.hideLoading();
var $message = $(
‘<li role="treeitem" aria-live="assertive"‘ +
‘ class="select2-results__option"></li>‘
);
var message = this.options.get(‘translations‘).get(params.message);
$message.append(
escapeMarkup(
params.myMessage? params.myMessage:message(params.args) //决定用我们的提示还是它自己的提示。
)
);
$message[0].className += ‘ select2-results__message‘;
this.$results.append($message);
};
else if((data.results == null || data.results.length === 0)&& !!myMsg){ 在result:message 时间的参数中加入我们的信息 }
if( data.results == null || data.results.length === 0)&& !myMsg) { 你原来怎么处理就怎么处理 }
原来的提示条件最好给他保留 如果我没有配置myMsg字段那你就按照你原来的处理，如果我有配置myMsg字段，你就要按照我的来。
我们在option上使用的字段是myMsg ,来配置本下拉框的无内容提示，
我们找到与结果相关的Result模块，并找到其原型上的append方法；
如果想要提示不应的内容，需要手动改造一下，让它去替换。
如果没有要求提示不一样的内容，直接在配置项中设置language就可以使用对应的语言；
看了一下文档，作者一看就是高手提供了10来种语言的提示信息，原来人家本来就有中文版的“别瞎拉了，你后台没返回”，还有英文版的“don`t blind pull la , then didn‘t give us ”,还有日文版的“ 雅蠛蝶雅蠛蝶” ，可恨的是zh-CH.js和zh-TW.js 是分别简体和繁体的，丫的，搞事情。
二、如何修改select2的提示信息
采用select2实例化后如果后台没有给我们返回数据的话，select2会友好的在下拉框处提示“No Result Is Fonud”（貌似是这样）
_queryParam:function(event){
if(!event){
return false;
}
var target = event.currentTarget;
var name = event.params.args.data.text;
$(target).val(name).trigger("change");
},
此时，我们的change事件被触发了，就和我们手动点击了option 一样，后续的代码可以顺利执行了。
jquery 如何选中 select中某个option?，用的不多，可能大家都忘记了吧。
event对象中包含了我们现在操作的dom对象，和当前选中的option上的值;
_confirmChange:function(event,callback,$this){
var that = this;
event.preventDefault();
$(".layui-layer-shade").remove();
layer.closeAll();
layer.open({
type: 1,
title: ‘返回‘,
area: [‘500px‘, ‘270px‘],
btn: [ ‘确认‘,‘取消‘],
closeBtn: 2,
content: $(‘#changeMsg‘),
btn1: function (index) {
layer.closeAll();
if(callback){
callback(event);
$($this).select2(‘close‘);
that.status.canChange = true;
}
},
btn2: function (index) {
layer.close(index);
$($this).select2(‘close‘);
}
});
//}
},
在确认或取消点击的一瞬间select2的下拉框要关闭，所以此时通过指正传入这个select2对象也是有必要的；
而event事件是select2包装后的事件，这个包装好的事件可以让我们跟踪到真正需要点击的select 标签；所以在 that._queryParam 中需要带入这个event对象；
that._queryParam 是中间函数，这个函数会在确认按钮后执行；下一步会触发真正的select标签change事件；
此时绑定在select2:selecting 事件上的函数会去调起弹框窗口；
第一件事情：阻止默认事件 event.preventDefault(); 我们的异步函数我们自己来控制，select2取消你自作主张的行为；
如何实现本地的这种异步操作？其实我们需要使用一个中间函数，让这个函数去触发select标签的change事件。
最初的函数是通过监控select标签的change状态来链式触发的，这一点很重要，如果想把目标回调函数放到select2的钩子函数中，会直接执行，不符合我们弹框进行确认取消的目的；
通常在最初程序设计的时候，正确的做法应该是把后续函数设计在layer的确认回调函数中，我本来不打算使用select2插件，但是产品的世界你懂得，变化是随时随地发生的。
1.2 在选择select2框下的内容时，不能立即执行回调函数，回调函数必须放在“确认”按钮点击后处理；
BaseSelection.prototype._attachCloseHandler = function (container) {
var self = this;
$(document.body).on(‘mousedown.select2.‘ + container.id, function (e) {
var $target = $(e.target);
var $select = $target.closest(‘.select2‘);
var $all = $(‘.select2.select2-container--open‘);
$all.each(function () {
var $this = $(this);
if (this == $select[0]) {
return;
}
var $element = $this.data(‘element‘);
//在模态框存在的条件下，禁止使用select2的关闭功能（这里可以根据你使用的类来灵活操作）
var mask = $(".layui-layer-shade");
if(mask.length == 0){
$element.select2(‘close‘);
}
});
});
};
select2会在其构造函数BaseSelection的原型上定义关闭方法，关闭方法中使用自定义的事件关联到对应id的盒子上，我们可以在这个方法中来阻断关闭操作；
1.1 在弹框出来后，除了点击“确认”和“取消”按钮，点击其他地方不能关闭下拉框；
我们需要进行2步骤操作：
首先在点击模态框的过程中，不能让select下拉框关闭：
现在有一个棘手的问题，我需要在选中的一瞬间进行弹框提示，然后不允许select2的其他事件继续向执行，然后经过弹框确认后再继续向下执行，此时弹框不能做出任何改变；
$("select").select2({
placeholder: ‘请选择‘
}).on("select2:selecting",function(e){
alert(" 我选中了 ")
});
这类事件（点击查看）可以通过在on绑定在select2实例上，一般性的功能可以在回调函数中处理；
该类事件可以理解为在select2对象在操作的各个阶段的钩子函数，当然官方为我们配置相应的接口，允许我们在打开，关闭，选前，选中，选后等时间阶段来处理我们配置的回调函数；
